Doist / reactist

Open source React components made with ❤️ by Doist
http://doist.github.io/reactist
MIT License
247 stars 21 forks source link

feat: Icon-only menu items, plus accessible menu group help links #793

Closed gnapse closed 1 year ago

gnapse commented 1 year ago

Short description

Introduces menu item component to represent groups of menu items shown as icon-only items, like the ones in the following screenshot:

CleanShot 2023-07-10 at 15 34 54@2x

In the process, a couple of other adjacent improvements are included:

Test plan

Similar to #792, I'll give you the test plan in a Todoist sister PR.

You are also encouraged to check things out here in Reactist via the IconMenuItem Story in storybooks.

PR Checklist

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.

engfragui commented 1 year ago

💭 I left some light-weight feedback on the todoist-web PR, as most (all?) of that is related to how we use this Reactist component in todoist-web.

One thing it might make sense to mention here as well (as that's related to the Reactist component itself and not its usage) is that my heart would like to navigate through the icon menu items) via left and right arrows, instead of up and down, although I'm not sure if this would be an appropriate ally practise...

https://github.com/Doist/reactist/assets/1509326/7c97c999-df3e-47af-92f1-ecc0ef692010

engfragui commented 1 year ago

💭 I was pleased to see that Chromatic (rightfully) spotted some UI changes (dividers, outline of dropdown elements, etc.). Either way, it all looks good to me (reasonable changes) 👍 (example)

@gnapse I'm not going to approve the Chromatic tests/review myself because I don't remember if we agreed that the author should do that or if the reviewer should do that (I think we said it's the author's responsibility though) (see https://github.com/Doist/reactist/blob/main/README.md#review-tests)

gnapse commented 1 year ago

my heart would like to navigate through the icon menu items via left and right arrows

I'll keep that in mind for a future iteration.