This PR enhances the MenuItem component to have props targeted at generating a more structured content inside it, rather than leaving it to the consumer of the component to build the menu item's content by using children.
Before
After
```jsx
```
```jsx
}
label="Click me to learn more…"
/>
```
The ability to use the component children instead of this new props is kept. It may prove useful in the future, so it is likely a feature we won't remove. It will give the freedom to consumers of the menu components to carve out custom menu items when they need it.
Still, this is a breaking change. The inner layout of a menu item changes in ways that would break the layout in the Todoist app if we adopt this without migrating most MenuItem elements to use the new props.
Why?
A few reasons:
We now need menu items with label and description. We've been achieving them manually in the apps, but the code is cumbersome and not reusable.
This allows us to standardize the spacing, and control the size of the icon area, which until now is kept uniform by virtue of using uniformly-sized icons. But the consumer can easily break the layout.
We now standardize the "shortcut" area of a menu item. Until now, consumer apps have been needing to solve this in-app.
PR Checklist
[x] Added tests for bugs / new features
[x] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
Versioning
Note
This PR's base branch is not main. So approving this does not yet mean it will be released. I'm planning a series of improvements to the menu component, that I'll gather in this base branch before I make a single release (or a handful of releases). This will allow me to test the changes with Todoist before comitting Reactist to the new features.
Short description
This PR enhances the
MenuItemcomponent to have props targeted at generating a more structured content inside it, rather than leaving it to the consumer of the component to build the menu item's content by usingchildren.The ability to use the component
childreninstead of this new props is kept. It may prove useful in the future, so it is likely a feature we won't remove. It will give the freedom to consumers of the menu components to carve out custom menu items when they need it.Still, this is a breaking change. The inner layout of a menu item changes in ways that would break the layout in the Todoist app if we adopt this without migrating most
MenuItemelements to use the new props.Why?
A few reasons:
PR Checklist
npm run validateand made sure no errors / warnings were shownCHANGELOG.mdVersioning
Demo