feat(snaps): Enable destructive footer buttons in Snap UI

[david0xd]

Description

Add/enable destructive (danger) button in Snaps UI custom footer.

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:

<Footer>
    <Button name="cancel" variant="destructive">
      Cancel
    </Button>
    <Button name="confirm" variant="destructive" disabled={true}>
      Confirm
    </Button>
</Footer>

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

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.

[metamaskbot]

Builds ready [f47b917]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1653 ± 51 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1515	1903	1652	107	51
		domContentLoaded	1501	1842	1627	100	48
		load	1516	1905	1653	107	51
		domInteractive	24	91	39	20	9
		backgroundConnect	10	66	23	17	8
		firstReactRender	15	104	42	31	15
		getState	4	72	20	22	11
		initialActions	0	1	0	0	0
		loadScripts	1080	1325	1192	77	37
		setupStore	7	69	23	21	10
		uiStartup	1721	2606	1964	230	110

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 80 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[FrederikBolding]

It seems that this component uses a different color for the destructive state.

I think we want to mirror the confirmations screen, see below for comparison.

[FrederikBolding]

@GuillaumeRx Should take a look at this, I'm assuming we weren't intending to let users override this in all cases