As discussed with @Catrope, the Codex MenuItem currently allows for more customization options, including actions and/or text indicators. So I'm updating this task to focus on including demos to illustrate these examples and providing guidelines in Codex.

The existing custom menu item display demo would be a great place to display this. Right now, it's a pretty silly example, but this would be a much more complex and realistic example.

El T383909#10518638, @AnneT escribió:

The existing custom menu item display demo would be a great place to display this. Right now, it's a pretty silly example, but this would be a much more complex and realistic example.

@AnneT I've included here some examples we could add as demos in both Menu and MenuItem pages, illustrating that customized elements such as actions can be included.

For the Menu page, I agree on updating the Menu item display example, updating the following:

• Rename the example to "With custom item display"
• A demo of a Menu with a header with actions and additional actions on each MenuItem.

For the MenuItem page, I would also include a new example for "With custom item display", including the following:

Let me know what do you think.

@bmartinezcalvo that looks great! I would suggest we remove the "(value:x)" part - that was in the original demo as a customization but it's kind of arbitrary, and with the new buttons I don't think we need it anymore.

El T383909#10521023, @AnneT escribió:

@bmartinezcalvo that looks great! I would suggest we remove the "(value:x)" part - that was in the original demo as a customization but it's kind of arbitrary, and with the new buttons I don't think we need it anymore.

Great, let's remove it. Find the updated example version in this Figma file.

Change #1116830 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] demo: Add MultiselectLookup with sticky menu header

https://gerrit.wikimedia.org/r/1116830

Unfortunately, now that we've realized that interactive elements within menu items are inaccessible via the keyboard, I think we need to decline this task. There are 2 things we can do to help MT rebuild RCFilters and to support menu item actions in the future:

1. I've included examples of menu item actions in this sandbox demo that also shows how you can create a menu header. This is meant to help the engineers who will be building RCFilters with Codex achieve the right UI. However, IMO we should not advertise these things yet because they do not meet accessibility standards.
2. Open a task to explore including interactive items within menu items. We will need to consider how to do this in a way that enables keyboard navigation to these interactive elements. This does not need to block the RCFilters project, although it would be nice to do to support that project and others that include interactive elements inside menus.

@bmartinezcalvo @CCiufo-WMF does that work for you?

@AnneT am I understanding correctly that you're suggesting we not merge your open patch then?

Or are you suggesting we add it to the sandbox demo (merge your patch) but just not try to add it to the actual Codex docs anywhere?

@CCiufo-WMF I could go either way on this. On one hand, it's not ideal to add a bunch of code to the sandbox that's specific to one project. That said, since we may consider adding menu item actions or menu headers to Codex in the future, it could be helpful for this demo to persist. Bárbara rightly pointed out that these sorts of discussions should be documented in some way so we can refer back to the decisions in the future.

For now, I'd recommend we merge the patch. We could consider adding a new page to the sandbox for experiments like this if that would help with organization.

@AnneT yeah that makes sense. I'm in support of still demoing this somewhere so it doesn't just live in an abandoned patch. I think the sandbox is an appropriate place for showcasing even imperfect things. My only recommendation then would be to consider adding a note somewhere with the demo outlining the shortcomings (probably not literally in the UI, but maybe as a code comment?).

@CCiufo-WMF great, I've moved the demo to a new experiments page (see here) and added code comments explaining the shortcomings/limitations of the demo and things that we don't recommend but are doing anyway (like buttons inside menu items). Thanks for the feedback!

@Anne this new demo looks good to me. I've created this task T385804 to solve the keyboard navigation and other interaction issues.

Change #1116830 merged by jenkins-bot:

[design/codex@main] demo: Add new sandbox page for experiments + RCFilters demo

https://gerrit.wikimedia.org/r/1116830

Change #1121109 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v1.20.1 to v1.20.2

https://gerrit.wikimedia.org/r/1121109

Change #1121109 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.20.1 to v1.20.2

https://gerrit.wikimedia.org/r/1121109