-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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
[Ext] Create SelectOption Component #20610
Labels
team-design-system
All issues relating to design system in Extension
Comments
garrettbear
added
the
team-design-system
All issues relating to design system in Extension
label
Aug 25, 2023
garrettbear
changed the title
[Ext] Create SelectButton Component
[Ext] Create SelectOption Component
Aug 31, 2023
garrettbear
added a commit
that referenced
this issue
Nov 20, 2023
### Please note that `SelectButton` and `SelectOption` are WIP files but are needed to make working with SelectWrapper possible. ## Explanation `SelectWrapper` is the context api/data wrapper for what will be used with `SelectButton`, `SelectOption`, and other future components. _This component doesn't have any visual aspects to it, so anything with see from the UI is temporary_ and will be updated in future PRs ( #20609 and #20610 ) Fixes #20607 - There is a lot to digest with the `SelectWrapper` component as it does have ties to `SelectButton` and `SelectOption`. Something worth pointing out is there is the option to have **controlled and uncontrolled for both value and the open state**. - Controlled open uses props `isOpen` and `onOpenChange` - Controlled value uses props `defaultValue`, `value`, and `onValueChange` - The SelectWrapper is in itself a context api and has a `useSelectContext` hook that can be utilized when creating custom features and use controlled props. See the `SelectContextType` to understand what may be used with this hook. To Do / WIP Issues: _It's a bit unclear if it really makes sense to have these at the `SelectWrapper` level._ - onBlur - onFocus - onChange <!-- Thanks for the pull request. Take a moment to answer these questions so that reviewers have the information they need to properly understand your changes: * What is the current state of things and why does it need to change? * What is the solution your changes offer and how does it work? Are there any issues, Slack conversations, Zendesk issues, user stories, etc. reviewers should consult to understand this pull request better? For instance: * Fixes #12345 * See: #67890 --> ## Screenshots/Screencaps <!-- If you're making a change to the UI, make sure to capture a screenshot or a short video showing off your work! --> ### Before <!-- How did the UI you changed look before your changes? Drag your file(s) below this line: --> ### After <!-- How does it look now? Drag your file(s) below this line: --> <img width="1290" alt="Screenshot 2023-10-11 at 11 08 28 AM" src="https://github.com/MetaMask/metamask-extension/assets/26469696/3a60a891-53e9-49b6-bc2e-7fed8679ee07"> ## Manual Testing Steps <!-- How should reviewers and QA manually test your changes? For instance: - Go to this screen - Do this - Then do this --> ## Pre-merge author checklist - [x] I've clearly explained: - [x] What problem this PR is solving - [x] How this problem was solved - [x] How reviewers can test my changes - [x] Sufficient automated test coverage has been added ## Pre-merge reviewer checklist - [x] Manual testing (e.g. pull and build branch, run in browser, test code being changed) - [x] PR is linked to the appropriate GitHub issue - [ ] **IF** this PR fixes a bug in the release milestone, add this PR to the release milestone If further QA is required (e.g. new feature, complex testing steps, large refactor), add the `Extension QA Board` label. In this case, a QA Engineer approval will be be required. --------- Co-authored-by: George Marshall <george.marshall@consensys.net>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: