feat(NcActions): submenus

[ShGKme]

☑️ Resolves

• Fix: [NcActions] Proposal: submenu support #6066

Add submenu feature:

• NcActionButton's is-menu is now not only for an icon, but actually to handle a specific menu
• #submenu:NAME slot is uses to pass a specific submenu

Takes into account:

• Multi-level menu stack
• Adding "Back" button to return from a submenu
• Escape closes submenu instead on an entire menu
• After opening a menu the first element is on focus
• After closing submenu the focus returns to the menu button

To discus:

• submenu vs menu name for slot
• Add a new prop in pair to is-menu because it's already called like a boolean flag

🖼️ Screenshots

Docs

In action

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[skjnldsv]

Design team told me some time ago that "back" should not be used, but rather the name of the parent option :)

[ShGKme]

Design team told me some time ago that "back" should not be used, but rather the name of the parent option :)

Files	Talk

Indeed. But looks weird for me. We are in a "Setting reminder menu", and the first menu button is "Set reminder". Click on "Ser reminder" sets nothing and goes back to file actions. This is also a11y issue.

cc @nextcloud-libraries/designers

[skjnldsv]

Indeed. But looks weird for me. We are in a "Setting reminder menu", and the first menu button is "Set reminder". Click on "Ser reminder" sets nothing and goes back to file actions. This is also a11y issue.

This was a direct request from @jancborchardt. Make sure we get his approval before changing that behaviour please :)

[Antreesy]

Tested, waiting for design decision

[marcoambrosini]

Nice job standardising this!

Agree that the word "back" works best in this case. "set reminder" sounds like another action, while all the button is doing is literally bringing us back. I agree with @ShGKme point

That said, I think this UI should only be a mobile fallback and we should have proper cascading menus like everybody else. It's way more intuitive to hover or tab through options than having to dive in and dive back out.

Examples

Microsoft 365

Google drive

Slack

Zoom