Skip to content

Commit

Permalink
feat(snaps): Enable destructive footer buttons in Snap UI (#29966)
Browse files Browse the repository at this point in the history
## **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
david0xd authored Feb 4, 2025
1 parent 600e4b1 commit 9bd0243
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 3 deletions.
12 changes: 9 additions & 3 deletions ui/components/app/snaps/snap-ui-footer-button/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
&:not(.hide-snap-branding) {
&.mm-button-primary {
box-shadow: none;
color: var(--color-text-alternative);
background-color: var(--color-icon-default);

&:hover:not(&--disabled) {
opacity: 80%;
Expand All @@ -13,11 +11,15 @@
&:active:not(&--disabled) {
opacity: 60%;
}

&:not(.mm-button-primary--type-danger) {
color: var(--color-text-alternative);
background-color: var(--color-icon-default);
}
}

&.mm-button-secondary {
border-color: var(--color-icon-default);
color: var(--color-icon-default);

& span {
color: var(--color-icon-default);
Expand All @@ -42,6 +44,10 @@
color: var(--color-icon-default);
}
}

&:not(.mm-button-primary--type-danger) {
color: var(--color-icon-default);
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
ButtonVariant,
UserInputEventType,
} from '@metamask/snaps-sdk';
import type { ButtonProps as SnapButtonProps } from '@metamask/snaps-sdk/jsx';
import { useSelector } from 'react-redux';
import classnames from 'classnames';
import {
Expand All @@ -26,6 +27,7 @@ import { getHideSnapBranding } from '../../../../selectors';
type SnapUIFooterButtonProps = {
name?: string;
variant?: ButtonVariant;
snapVariant?: SnapButtonProps['variant'];
isSnapAction?: boolean;
onCancel?: () => void;
};
Expand All @@ -41,6 +43,7 @@ export const SnapUIFooterButton: FunctionComponent<
isSnapAction = false,
type,
variant = ButtonVariant.Primary,
snapVariant,
form,
...props
}) => {
Expand Down Expand Up @@ -88,6 +91,7 @@ export const SnapUIFooterButton: FunctionComponent<
flexDirection: FlexDirection.Row,
}}
data-theme={null}
danger={snapVariant === 'destructive'}
>
{isSnapAction && !hideSnapBranding && !loading && (
<SnapIcon snapId={snapId} avatarSize={IconSize.Sm} marginRight={2} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const footer: UIComponentFactory<FooterElement> = ({
key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
props: {
...buttonMapped.props,
snapVariant: buttonMapped.props?.variant,
variant:
providedChildren.length === 2 && index === 0
? ButtonVariant.Secondary
Expand Down

0 comments on commit 9bd0243

Please sign in to comment.