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.

Sign up for GitHub

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

Jump to bottom

feat: add dropdown component #2420

Merged
merged 12 commits into from
May 24, 2024
Merged

feat: add dropdown component #2420

merged 12 commits into from
May 24, 2024

Conversation

FrederikBolding
Copy link
Member

@FrederikBolding FrederikBolding commented May 21, 2024 •
edited
Loading

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

<Dropdown name="dropdown" value="option3">
  <Option value="option1">Option 1</Option>
  <Option value="option2">Option 2</Option>
  <Option value="option3">Option 3</Option>
</Dropdown>

Similarly to Input, it optionally uses value to determine the initial value/preselected dropdown item. This can also be used to control the input when re-rendering with snap_updateInterface. The dropdown 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 selectInDropdown to snaps-jest and uses this new component in the Interactive UI example Snap.

Progresses https://github.com/MetaMask/MetaMask-planning/issues/1575
@FrederikBolding FrederikBolding force-pushed the fb/add-dropdown branch 3 times, most recently from d80ff2d to 8531f5c Compare May 23, 2024 14:25
@FrederikBolding
Copy link
Member Author

@metamaskbot update-pr
@FrederikBolding FrederikBolding marked this pull request as ready for review May 23, 2024 15:44
@FrederikBolding FrederikBolding requested a review from a team as a code owner May 23, 2024 15:44
Mrtenz
Mrtenz reviewed May 24, 2024
View reviewed changes
packages/snaps-sdk/src/jsx/components/form/Dropdown.ts
* @property name - The name of the dropdown. This is used to identify the
* state in the form data.
*/
type DropdownProps = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should support a placeholder and default option here?
Copy link
Member Author

@FrederikBolding FrederikBolding May 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Default option is the same as using value. The underlying DS component (which uses plain HTML) doesn't support a placeholder so I would vote we put that off
@FrederikBolding FrederikBolding merged commit ab71704 into main May 24, 2024
151 checks passed
@FrederikBolding FrederikBolding deleted the fb/add-dropdown branch May 24, 2024 11:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
4 participants
@FrederikBolding @Mrtenz @GuillaumeRx @metamaskbot