Closed gnapse closed 1 year ago
The menu positioning within limited screen space seems to need some tuning. Some instances exist where the menu renders up or down with scrolling while enough vertical space exists to render the full menu:
Let me know if we should create a new issue about it. 👍
--
Code looks great. 🙌
The menu positioning within limited screen space seems to need some tuning. Some instances exist where the menu renders up or down with scrolling while enough vertical space exists to render the full menu:
Could you confirm if this is something new when using this branch of Reactist? Or can you reproduce in Todoist without this using this branch?
Could you confirm if this is something new when using this branch of Reactist?
The behavior introduced here is new and better since, as it is, menu actions become inaccessible under limited screen space.
Short description
This brings in from Todoist the CSS styles we use for menus in Todoist and Twist.
Up until now, we've had the menus in Reactist styles in more basic ways, and dealt with the style changes as CSS overrides in the app code. This PR now makes Reactist provide the menu styling, as Reactist does for all its other components.
New sub-menu components
Additionally, this introduces two new menu components:
SubMenuItem
andSubMenuList
. This was necessary for a few reasons:SubMenuItem
, we needed it because we needed a component that acted as a sub-menu button, but with an interface and styling closer to that of theMenuItem
.SubMenuList
, it needs a tiny but important dedicated CSS rule to have it be aligned with the sub menu item that triggered the sub-menu (see screenshot below, including the added orange lines to show what I'm alignment this is about):Test plan (IMPORTANT)
Even though this is not going to be released after merging (see note in the "Versioning" section below) it is very important that you help me validate that this is good to go to use in the apps.
I'll assign as reviewer in Todoist the same reviewer as this PR, so that you can execute the test plan I'll put over there.
PR Checklist
npm run validate
and made sure no errors / warnings were shownCHANGELOG.md
Versioning