Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add RadioButton component #2592

Merged
merged 9 commits into from
Jul 24, 2024
Merged

feat: Add RadioButton component #2592

merged 9 commits into from
Jul 24, 2024

Conversation

david0xd
Copy link
Contributor

@david0xd david0xd commented Jul 22, 2024

Adds support for a RadioGroup/Radio component, that can be used on its own or as part of a Field.

<RadioGroup name="radiogroup" value="option3">
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</RadioGroup>

Similarly to Input, it optionally uses value to determine the initial value/preselected Radio item. This can also be used to control the input when re-rendering with snap_updateInterface. The RadioGroup will also trigger InputChangeEvent similarly to an Input.

This PR mostly adds validation and types for this new component as well as some handling for the form state. This will need a follow-up PR in the extension to complete integration. This PR also adds support for chooseFromRadioGroup to snaps-jest and uses this new component in the Interactive UI example Snap.

Related task: https://github.com/MetaMask/MetaMask-planning/issues/1571

@david0xd david0xd self-assigned this Jul 22, 2024
Copy link

codecov bot commented Jul 22, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.01%. Comparing base (f7c4121) to head (a8048d3).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2592      +/-   ##
==========================================
+ Coverage   94.00%   94.01%   +0.01%     
==========================================
  Files         459      461       +2     
  Lines        9650     9678      +28     
  Branches     1482     1486       +4     
==========================================
+ Hits         9071     9099      +28     
  Misses        579      579              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@david0xd david0xd marked this pull request as ready for review July 24, 2024 11:34
@david0xd david0xd requested a review from a team as a code owner July 24, 2024 11:34
@david0xd david0xd changed the title Add RadioButton component feat: Add RadioButton component Jul 24, 2024
@david0xd david0xd merged commit 12eaf23 into main Jul 24, 2024
156 checks passed
@david0xd david0xd deleted the dd/radio-button-component branch July 24, 2024 15:14
david0xd added a commit to MetaMask/metamask-extension that referenced this pull request Aug 1, 2024
### Waiting on release of: MetaMask/snaps#2592

## **Description**
This PR integrates new Radio components for Snap UI.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26181?quickstart=1)

## **Related issues**
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/1571

## **Manual testing steps**
1. Go to `Test Snaps` and install `Interactive UI Snap`.
2. Run Interactive UI Snap by creating a dialog.
3. Check that radio options are available in the UI and confirm their
functionality. (Latest Test Snaps needs to be released before this is
possible, use `main` branch in Snaps repo and run locally if necessary)

## **Screenshots/Recordings**
### **Before**
Nothing to show. Radio options were not available before.

### **After**
![Screenshot 2024-07-29 at 11 29
00](https://github.com/user-attachments/assets/f978ffc5-9c50-4031-a001-4af46f7674fe)
![Screenshot 2024-07-29 at 11 29
17](https://github.com/user-attachments/assets/b8659e75-af9c-455f-a1f1-9fd87b59e35e)
![Screenshot 2024-07-29 at 11 29
40](https://github.com/user-attachments/assets/4d86e1d2-858d-41e8-b383-6c17b711ad1f)

## **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/develop/.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/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.
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this pull request Aug 12, 2024
### Waiting on release of: MetaMask/snaps#2592

## **Description**
This PR integrates new Radio components for Snap UI.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26181?quickstart=1)

## **Related issues**
Fixes: MetaMask/MetaMask-planning#1571

## **Manual testing steps**
1. Go to `Test Snaps` and install `Interactive UI Snap`.
2. Run Interactive UI Snap by creating a dialog.
3. Check that radio options are available in the UI and confirm their
functionality. (Latest Test Snaps needs to be released before this is
possible, use `main` branch in Snaps repo and run locally if necessary)

## **Screenshots/Recordings**
### **Before**
Nothing to show. Radio options were not available before.

### **After**
![Screenshot 2024-07-29 at 11 29
00](https://github.com/user-attachments/assets/f978ffc5-9c50-4031-a001-4af46f7674fe)
![Screenshot 2024-07-29 at 11 29
17](https://github.com/user-attachments/assets/b8659e75-af9c-455f-a1f1-9fd87b59e35e)
![Screenshot 2024-07-29 at 11 29
40](https://github.com/user-attachments/assets/4d86e1d2-858d-41e8-b383-6c17b711ad1f)

## **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/develop/.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/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.
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this pull request Aug 13, 2024
### Waiting on release of: MetaMask/snaps#2592

## **Description**
This PR integrates new Radio components for Snap UI.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26181?quickstart=1)

## **Related issues**
Fixes: MetaMask/MetaMask-planning#1571

## **Manual testing steps**
1. Go to `Test Snaps` and install `Interactive UI Snap`.
2. Run Interactive UI Snap by creating a dialog.
3. Check that radio options are available in the UI and confirm their
functionality. (Latest Test Snaps needs to be released before this is
possible, use `main` branch in Snaps repo and run locally if necessary)

## **Screenshots/Recordings**
### **Before**
Nothing to show. Radio options were not available before.

### **After**
![Screenshot 2024-07-29 at 11 29
00](https://github.com/user-attachments/assets/f978ffc5-9c50-4031-a001-4af46f7674fe)
![Screenshot 2024-07-29 at 11 29
17](https://github.com/user-attachments/assets/b8659e75-af9c-455f-a1f1-9fd87b59e35e)
![Screenshot 2024-07-29 at 11 29
40](https://github.com/user-attachments/assets/4d86e1d2-858d-41e8-b383-6c17b711ad1f)

## **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/develop/.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/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.
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this pull request Aug 14, 2024
### Waiting on release of: MetaMask/snaps#2592

## **Description**
This PR integrates new Radio components for Snap UI.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26181?quickstart=1)

## **Related issues**
Fixes: MetaMask/MetaMask-planning#1571

## **Manual testing steps**
1. Go to `Test Snaps` and install `Interactive UI Snap`.
2. Run Interactive UI Snap by creating a dialog.
3. Check that radio options are available in the UI and confirm their
functionality. (Latest Test Snaps needs to be released before this is
possible, use `main` branch in Snaps repo and run locally if necessary)

## **Screenshots/Recordings**
### **Before**
Nothing to show. Radio options were not available before.

### **After**
![Screenshot 2024-07-29 at 11 29
00](https://github.com/user-attachments/assets/f978ffc5-9c50-4031-a001-4af46f7674fe)
![Screenshot 2024-07-29 at 11 29
17](https://github.com/user-attachments/assets/b8659e75-af9c-455f-a1f1-9fd87b59e35e)
![Screenshot 2024-07-29 at 11 29
40](https://github.com/user-attachments/assets/4d86e1d2-858d-41e8-b383-6c17b711ad1f)

## **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/develop/.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/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.
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this pull request Aug 14, 2024
### Waiting on release of: MetaMask/snaps#2592

## **Description**
This PR integrates new Radio components for Snap UI.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26181?quickstart=1)

## **Related issues**
Fixes: MetaMask/MetaMask-planning#1571

## **Manual testing steps**
1. Go to `Test Snaps` and install `Interactive UI Snap`.
2. Run Interactive UI Snap by creating a dialog.
3. Check that radio options are available in the UI and confirm their
functionality. (Latest Test Snaps needs to be released before this is
possible, use `main` branch in Snaps repo and run locally if necessary)

## **Screenshots/Recordings**
### **Before**
Nothing to show. Radio options were not available before.

### **After**
![Screenshot 2024-07-29 at 11 29
00](https://github.com/user-attachments/assets/f978ffc5-9c50-4031-a001-4af46f7674fe)
![Screenshot 2024-07-29 at 11 29
17](https://github.com/user-attachments/assets/b8659e75-af9c-455f-a1f1-9fd87b59e35e)
![Screenshot 2024-07-29 at 11 29
40](https://github.com/user-attachments/assets/4d86e1d2-858d-41e8-b383-6c17b711ad1f)

## **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/develop/.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/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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants