Implement OnyxFlyoutMenu

[MajaZarkova]

Open Questions/To-dos

• [x] How to interpret the blank context area? → Not relevant to this ticket and is also only intended for designers
• [x] Should we separate the icon button and label button from the flyout? → Not relevant to this ticket

Why?

This component is needed and will be used inside the NavMenuItem. This is just a support component. It's responsible for handling keyboard navigation, rendering and opening of the flyout.

Design

Figma Link (Context Area section)

Acceptance criteria

• [x] Has default slot for select items
• [x] has keyboard support
• [x] make sure keyboard navigation works correctly in OnyxNavItem
• [x] make sure aria-selected styles are correctly applied on the OnyxNavItem nested options
• [x] considers the relevant aria roles and patterns
• [x] Used in the OnyxNavItem and the OnyxUserMenu

Definition of Done

• [x] covered by component tests
• [x] screenshot tests are updated
• [x] follow-up tickets were created if necessary -> #1415
• [x] updated version + documentation is deployed
• [x] Storybook can show the feature
• [x] Set task to In Approval

Approval

• OnyxFlyoutMenu
• OnyxNavButton
  • OnyxNavButton will replace OnyxNavItem. OnyxNavItem is re-written and it's actually used inside OnyxNavButton
• [x] approved by designer @jannick-ux
• [ ] approved by dev

Reference implementations

CoreUI Reference

ARIA

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/ https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

[larsrickert]

As discussed, this would be our prefered API for the nav bar:

<template>
  <OnyxNavBar>
    <OnyxNavButton>
      Item 1
      <OnyxBadge dot />
    </OnyxNavButton>

    <OnyxNavButton>
      Item 2

      <template #children>
        <OnyxNavItem> I am child 1 </OnyxNavItem>
        <OnyxNavItem> I am child 2 </OnyxNavItem>
        <OnyxNavItem> I am child 3 </OnyxNavItem>
      </template>
    </OnyxNavButton>

    <OnyxUserMenu>
      <OnyxListItem @click="handleLogout">
        <OnyxIcon />
        Logout
      </OnyxListItem>

      <OnyxListItem @click="router.push('/settings')"> Settings </OnyxListItem>
    </OnyxUserMenu>
  </OnyxNavBar>
</template>