Radix-based Menu on Button component #6059
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#13333 Bundle Size — 62.65MiB (+0.05%).
Important Bundle introduced 19 duplicate packages – View changed duplicate packages Bundle metrics
|
| Current #13333 |
Baseline #13328 |
|
|---|---|---|
 Initial JS |
45.71MiB(+0.07%) |
45.68MiB |
 Initial CSS |
0B |
0B |
 Cache Invalidation |
24.16% |
21.19% |
| Chunks |
30 |
30 |
| Assets |
33 |
33 |
| Modules |
4374(+0.55%) |
4350 |
| Duplicate Modules |
524 |
524 |
| Duplicate Code |
31.7%(-0.03%) |
31.71% |
| Packages |
469(+4.22%) |
450 |
| Duplicate Packages |
70(+37.25%) |
51 |
Bundle size by type 2 changes 1 regression 
1 improvement
| Current #13333 |
Baseline #13328 |
|
|---|---|---|
| JS |
62.64MiB (+0.05%) |
62.61MiB |
| HTML |
11.16KiB (-0.33%) |
11.2KiB |
Bundle analysis report Branch feature/panel-selector-dropdown-... Project dashboard
balazsbajorics
approved these changes
Jul 11, 2024
Rheeseyb
approved these changes
Jul 11, 2024
Rheeseyb
approved these changes
Jul 11, 2024
liady
reviewed
Jul 11, 2024
liady
pushed a commit
that referenced
this pull request
Dec 13, 2024
## Problem It's hard to create simple menu-on-button type UIs, that are triggered by a button and display a floating list of options that can be selected. We also want to support keyboard navigation to pick an option ## Fix Wrap `DropdownMenu` from Radix to implement the component described above. This PR adds the new component, and uses it in two places: the panel selector button and the pages + button (see `canvas-toolbar.tsx` and `pages-pane.tsx` for examples of the new dropdown component) <img width="522" alt="image" src="https://github.com/concrete-utopia/utopia/assets/16385508/4e8467a1-f75f-4b3d-af18-530fd8009a8d"> <img width="221" alt="image" src="https://github.com/concrete-utopia/utopia/assets/16385508/a8a524df-b47b-4e87-a623-3a2c1d2be950"> ### How to read this PR - Fork [this project](https://utopia.fish/p/e3a62781-midi-foxtrot/?branch_name=feature-panel-selector-dropdown-v2) - Try the panel opener button - Add a new page If you're interested in the code, - look at the changes in `canvas-toolbar.tsx` - look at the changes in `pages-pane.tsx` - look at the underlying code in `radix-components.tsx` (final file name TBD) ## Scope This PR only deals with the simple menu-on-button component. It's more advanced variant, which will be used in the component picker, will come on a follow-up PR **Manual Tests:** I hereby swear that: - [ ] I opened a hydrogen project and it loaded - [ ] I could navigate to various routes in Preview mode
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
It's hard to create simple menu-on-button type UIs, that are triggered by a button and display a floating list of options that can be selected. We also want to support keyboard navigation to pick an option
Fix
Wrap
DropdownMenufrom Radix to implement the component described above. This PR adds the new component, and uses it in two places: the panel selector button and the pages + button (seecanvas-toolbar.tsxandpages-pane.tsxfor examples of the new dropdown component)How to read this PR
If you're interested in the code,
canvas-toolbar.tsxpages-pane.tsxradix-components.tsx(final file name TBD)Scope
This PR only deals with the simple menu-on-button component. It's more advanced variant, which will be used in the component picker, will come on a follow-up PR
Manual Tests:
I hereby swear that: