Remove old MenuButton, replaced with a new set of Menu components #278
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.
Short description
This introduces a new richer and accessibility-compliant dropdown menu.
It has support for
<hr />
elements)MenuButton
be a reactistButton
and receive its props, or a menu item can be a link, thus having ahref
and triggering navigation).The menu items have a stricter format where you provide a label, icon (optional) and keyboard shortcut (optional) instead of free-formUpdate: menu items are now un-opinionated about their content. Much better that way.children
. Though this is something I may change because after the fact I realize it may be too restrictive. I'll probably revert the menu items to allow more freedom in their content. The main Twist app menu is an example of the need for this.I originally planned to not remove the existing
MenuButton
, merely deprecate it, and make this a minor release. But the name clash was what tipped it towards making this a replacement (can't export two different things namedMenuButton
), which of course means this is a breaking change.There's a PR in the works that makes Twist adopt this new menu, replacing all the existing ones.
PR Checklist
npm run validate
and made sure no errors / warnings were shownCHANGELOG.md
package.json
npm run build-all
)Versioning
Should become part of a new major release (I'm exploring the possibility to make a single new major release for both this and #276 depending on the ability to synchronize having both merged around the same time).
Demo
For the future
I have validated the possibility to implement some features in this menu that are needed in Todoist but not in Twist (e.g. using it as a context menu; allowing to control the open/closed state from the outside). I had some difficulties that should be solvable but I was already devoting too much time and the primary use case here is to be able to use this in Twist, where those features are not needed.
It would also be a nice to have to be able to have more semantic menu items such as checkbox menu item and a group of radio-button menu items. See reakit which has support for all this. We could adopt this for menu items such as Twist's "toggle dark/light theme" option in the main app menu.