MenuBar: support for reverse collapsing order

[rolfsmeds]

trafficstars

Description

An option to have Menu Bar buttons collapse into the overflow menu starting from the left (start) end of the bar instead of the right (end) end of the bar.

Use cases

As a user I want the rightmost buttons in a menubar to stay visible as long as possible, because they're the most important ones So that I can find and use them easily

Acceptance criteria

• [x] Flow API for toggling the mode, e.g. MenuBar:setReverseCollapseOrder(boolean)
• [x] WC/React API for toggling the mode, e.g. <vaadin-menu-bar reverse-collapse ...>
• [x] When the mode is enabled, MenuBarButtons collapse into the overflow menu starting from the START end of the bar.
• [x] The overflow menu itself is at the END end of the bar regardless of mode.

General criteria

• [x] APIs reviewed

• [ ] UX/DX tests in Alpha

• [x] Documentation: only needs to be mentioned in the current Overflow section, no live example needed.

• [ ] How to test?

• [ ] Limitations:

Security

• [x] Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)

[tomivirkki]

Just to clarify, if you set the menubar items as:

menuBar.items = [
  { text: 'First' },
  { text: 'Second' },
  { text: 'Third' },
  { text: 'Fourth' },
  { text: 'Fifth' }];

should reverseCollapse keep the current item ordering:

https://github.com/vaadin/platform/assets/1222264/5a5f469f-d69f-4808-95c5-72ac2df0bc5a

...or reverse it also:

https://github.com/vaadin/platform/assets/1222264/488ec879-b5dc-4039-b127-2ef52e072eff

[rolfsmeds]

Keep the current ordering of items.

[lipisak]

Hello, Wouldn't it be better to have the overflow menu on the other side of menu? If you colapse the leftmost items to the overflow menu that is on the "end" side, it could be confusing. We use the menu on the top right of item detail and one of "actions" is Close cross. With your proposal the Cross would be the one before the last because of the overflow menu which appears next to it on the right side. JS

[rolfsmeds]

Hi @lipisak. It depends a lot on your use case. I agree that if your rightmost item is Close / X, then it would be better to have the overflow menu on the left. However, in other use cases it makes more sense on the right, as that is where you would typically have your "miscellaneous" functions.

If you have one item in the menu that should never collapse (as I suspect is the case with the close button), I would propose having that as a separate button next to the MenuBar instead.

So while we could support having the overflow menu on the left, that would be a separate feature. Feel free to make a ticket about that.

[lipisak]

Hi @rolfsmeds, I guess we discussed this feature in Frankfurt on Vaadin event 🙂

My opinion in this is: put the overflow menu on that side from which you "remove" the items.... Close action was just an example. What I tried to suggest was that it could be confusing that there are item on the "left side" that are disappearing and the "Show more" menu is on the other side. I also understand your opinion on this. Actually my example is valid only in case the menu is on the right side of the screen. So I guess there could be also API to define placement of the overflow. Let's say:

menu.setOverflowPosition(BEGIN/END)

This API could be RTL/LTR specific as each of these settings takes BEGIN/END differently. I suggest this change here because you are changing menu bar and this is very related to the change you are making and I guess I am not alone who would appreciate this and if I raise issue for this in your GitHub it could take long time before you get to it - but you are considering to make changes in menu bar now 🙂 I hope you understand why my motivation about add my suggestion to this "pack of changes".

Thank you JS

[rolfsmeds]

@lipisak I think we did discuss this in Frankfurt, yes! And I do agree that it would also be useful to be able to set the position of the overflow menu. However, this was built as a sponsored feature with a specific, fixed scope, so the overflow position will need to be done separately. Here's a ticket for it: https://github.com/vaadin/web-components/issues/7130