-
Notifications
You must be signed in to change notification settings - Fork 129
Platform: Menu Menu Trigger Component Technical Design
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. A "trigger" element can be any element which has the menuTriggerFor directive.
<fdp-button [menuTriggerFor]="rootList" [isSplit]="true">Menu</fdp-button>
<fdp-menu #rootList>
<fdp-menu-item [menuTriggerFor]="sublistA">Item A</fdp-menu-item>
<fdp-menu-item [menuTriggerFor]="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 [menuTriggerFor]="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 [menuTriggerFor]="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 with multiple triggers -->
<fdp-menu #commonMenu>
<fdp-menu-item>Edit</fdp-menu-item>
<fdp-menu-item>Delete</fdp-menu-item>
<fdp-menu-item>New</fdp-menu-item>
</fdp-menu>
<fdp-menu-button [menuTriggerFor]="commonMenu">First Button</fdp-menu-button>
<fdp-menu-button [menuTriggerFor]="commonMenu">Second Button</fdp-menu-button>
<fdp-menu-button [menuTriggerFor]="commonMenu">Third Button</fdp-menu-button>
<!-- Menu component for constructing a menu from a list of menu item data -->
<fdp-dynamic-menu-button [list]="menuList"></fdp-dynamic-menu-button>The menu architecture 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 "menuTriggerFor" directive.
- Menu should allow for keyboard navigation through all menu items and subitems.
- Menu should be constructed declaratively.
- Menus can have multiple trigger elements
We should create a MenuTrigger (menuTriggerFor) directive class which will serve as the class for which the menu trigger behavior will be applied. It will encapsulate all the functionality needed to establish menu association, show/hide the associated menu, and handle keyboard inputs.
The combination of the MenuTrigger directive and Button 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
The MenuComponent is a container which contains MenuItems.
The class name for the icon to be included in the menu item.
When a menu item is clicked, it will emit a click event.
When the MenuTrigger directive is applied to a MenuItem, the MenuItem will include a "dropdown" arrow to indicate that a menu will "cascade" from it.
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.
Consider incorporating "lazy rendering" of menus.
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: No
-
fdp-menu-itemcan be supported normally with i18n marker:
<fdp-menu-item i18n="@@menuItemB2" (click)="invokeB2()">Item B2</fdp-menu-item>Redesign Required: No
As explained in the general guidelines document, Menu is practically not expected to have 100s of items coming from a server/db and therefore supporting it with individual items alone is sufficient.
From Kavya: We need to consider using the following existing features in Menu based on the new Fiori3 guidelines:
- Group headers need to be removed and separator lines should be used instead to show grouping
- Add-on icon that allows to be selected/de-selected needs to be removed
- The proposed design needs to also handle icons, both primary and secondary. The secondary icon should be shown only when the item triggers a submenu, therefore it should be handled in the library itself, right? Should options to change the secondary icon be given to end-user?
- Scrolling and scrollLimit should be defined as in the existing platform Menu design. With the new design, we can possibly also separate out scrolling functionality for submenus independent of menu.
<fdp-menu-button [triggerFor]="rootList" [isSplit]="true" [isScrolling]="true" [scrollLimit]="3">Menu</fdp-button>
<fdp-menu #rootList>
<fdp-menu-item [triggerFor]="sublistA" [primaryIcon]="sap-icon--grid">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>- Currently when we use a menu with a trigger, it is usually as part of a popover, where
fdp-menu-buttonis part offd-popover-controlandfdp-menuis part offd-popover-body. Does this new design also take into account that menu and its trigger will be ultimately part of thefd-popover component?