feat(NcActions): submenus

[ShGKme]

☑️ Resolves

• Fix: https://github.com/nextcloud-libraries/nextcloud-vue/issues/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
• [x] 📘 Component documentation has been extended, updated or is not applicable
• [x] 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 :)

[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

Update: Hidden as not strictly related.

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

[ShGKme]

Converting to draft during design discussions in the issue

[marcoambrosini]

Converting to draft during design discussions in the issue

@ShGKme I opened a separate issue for the cascading proposal, I think what you've done is still useful for mobile. Don't you think? And even for desktop it improves the current state, so I wouldn't want to block it

[ShGKme]

@ShGKme I opened a separate issue for the cascading proposal, I think what you've done is still useful for mobile. Don't you think? And even for desktop it improves the current state, so I wouldn't want to block it

I'm not sure, because if we go with the cascade, implementation should be different from both HTML (a11y) side and vue component interface.

Something like that

<NcActions>
  <NcActionButton>Option 1<NcActionButton>
  <NcActionButton>Option 2<NcActionButton>
  <NcActionSubmenu label="Option 3">
    <NcActionButton>Option 3.1<NcActionButton>
    <NcActionButton>Option 3.2<NcActionButton>
  <NcActionSubmenu>
</NcActions>

This would be cool to support both views (e.g. desktop/mobile switch). but we'd need to think about the implementation, especially with our quite complex NcActions component.