Overflow menu opening not consistent with other flyouts

[gabbsmo]

Describe the bug
When clicking the toggle button for a flyout menu the sub menu will become visible or hidden. This does not work for the overflow button, that instead triggered by hovering.

To Reproduce
See Pattern Lab

Expected behavior
As in Fluent React, where both types of flyout menus are toggled by clicking.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 121

[StfBauer]

@gabbsmo - thank you for using hTWOo.

The hover flyout is actually triggered on both interaction on hover as well as flyout.
Hover: - To show on desktop the flyout fast or if you click on it you can freeze thy flyout.
Click - Adds a special show class to the flyout to make it visible - click it again and you unlock the menu.

Screen.Recording.2024-02-15.at.15.38.23.mov

The UX in Fluent Ui on the other hand only support the click event support. Even when on desktop, where hover usually works and gives you faster access to the menu entries you always have to click. This way you don't have any quick access by simply hover over the menu.

In case of hTWOo you always have both options quick access on desktop by hover and toggle on click.

While testing on mobile I recognise that the overflow button not always fires. This should be fixed soon.

[gabbsmo]

But the overflow flyouts are still different from the others in that sample. The others only respond to click.

[StfBauer]

@gabbsmo Ahhh now I see. Fair point will make the other to trigger on hover on the arrow too.

[gabbsmo]

I found another inconsistency that unfortunately cannot be reproduced in Pattern Lab.

This is the selector for displaying the flyout on hover: .has-overflow .hoo-buttonicon-overflow:hover>.hoo-buttonflyout
This is for when clicking: .has-overflow>.hoo-overflow>.show-flyout.hoo-buttonicon-overflow>.hoo-buttonflyout

Notice that clicking requires hoo-button-icon-overflow to be a direct child of hoo-overflow. This causes issues with my existing code base where I have wrapped the button and submenu in a custom element. This causes the custom element to be the direct decendant of hoo-overflow, instead of hoo-button-icon-overflow.

@StfBauer What do you think about using something like this instead for the click activation?
.has-overflow>.hoo-overflow .show-flyout.hoo-buttonicon-overflow>.hoo-buttonflyout

[gabbsmo]

And another one. The overflow button does not have the same height as the other command bar buttons. It looks a little out of place. You can compare with Fluent React, where there is no difference in height between overflow and other command bar buttons.

[gabbsmo]

Sorry about the spam. Let me know if you prefer these as separate issues.

In hwtoo Pattern Lab the background changes when overing over the overflow button, but not the other buttons in the command bar. In Fluent React all buttons have a background on hover.

[StfBauer]

@gabbsmo thank you very much for your feedback. It was awesome working with you.

I guess I fixed all the issues now for the Molecues - Command Bar with overflow