Platform: Menu Menu Trigger Component Technical Design

Menu/Menu Trigger

Summary

A Menu is a set of action items or Menu Items, which appear/disappear on click of a trigger element. Menu Items are clickable items which invoke some action within an application. Examples of trigger elements of a Menu include a Menu Button or a Menu Item.

Example

<fdp-menu-button [triggerFor]="rootList" [isSplit]="true">Menu</fdp-button>

<fdp-menu #rootList>
    <fdp-menu-item [triggerFor]="sublistA">Item A</fdp-menu-item>
    <fdp-menu-item [triggerFor]="sublistB">Item B</fdp-menu-item>
    <fdp-menu-item (click)="invokeC()">Item C</fdp-menu-item>
    <fdp-menu-item (click)="invokeD()">Item D</fdp-menu-item>
</fdp-menu>

<fdp-menu #subListA>
    <fdp-menu-item (click)="invokeA1()">Item A1</fdp-menu-item>
    <fdp-menu-item (click)="invokeA2()" disabled>Item A2</fdp-menu-item>
    <fdp-menu-item (click)="invokeA3()">Item A3</fdp-menu-item>
</fdp-menu>

<fdp-menu #subListB>
    <fdp-menu-item [triggerFor]="subListB1">Item B1</fdp-menu-item>
    <fdp-menu-item (click)="invokeB2()">Item B2</fdp-menu-item>
    <fdp-menu-item (click)="invokeB3()">Item B3</fdp-menu-item>
</fdp-menu>

<fdp-menu #subListB1>
    <fdp-menu-item [iconClass]="'sap-icon--cart'" (click)="invokeB1x()">Item B1x</fdp-menu-item>
    <fdp-menu-item [iconClass]="'sap-icon--settings'" (click)="invokeB1y()">Item B1y</fdp-menu-item>
    <fdp-menu-item [iconClass]="'custom-icon--happy-face'" (click)="invokeB1z()">Item B1z</fdp-menu-item>
</fdp-menu>

<!-- Shellbar menu button -->
<fdp-shellbar-menu-button [triggerFor]="shellbarMenu"></fd-shellbar-menu-button>

<fdp-menu #shellbarMenu>
    <fd-menu-item>First</fd-menu-item>
    <fd-menu-item>Second</fd-menu-item>
</fdp-menu>

<!-- Menu component for constructing a menu from a list of menu item data -->
<fdp-dynamic-menu-button [list]="menuList"></fdp-dynamic-menu-button>

Design

Features

The menu archetecture should be patterned after the Angular Material Menu. The Menu should include the following features:

• Menus have a designated trigger element (i.e. MenuButton, MenuItem) identified by "triggerFor" attribute.
• Menu should allow for keyboard navigation through all menu items and subitems.
• Menu should be constructed declaritively

Base Class

We should create a MenuTriggerBase class which will serve as the common class from which all "trigger" elements are extended. It will encapsulate all the functionallity needed to establish menu association, show/hide the associated menu, and handle keyboard inputs.

This base component should be able to be extended several of the requested components like:

• Menu Button
• Split Menu Button
• Contextual Menu Button (?)
• Overflow Menu Button (?)
• Toolbar Menu Button
• Shellbar Menu Button
• Menu Item

Notes

Menus constructed in this manner allow for more sensible internationalization, as all the translatable text are exposed in the template. The i18n directive can be applied to the MenuItems directly.

This Menu design is modular and more easily extensible - we can use the same base class for all variations of menus with minimal code variation.

The cascading menu feature as defined by MegaMenu can be applied to any trigger element - thus we don't need to create a separate MegaMenu component.

References

• Material Design: Menu