Platform: Split Menu Button Component V1.0 Technical Design

Split Menu Button Component

Summary

• It features a button with a label and an expand icon.
• The label specifies the default action and the expand icon opens a menu that list the available actions.
• The split button provides a quick and compact way for users to initiate a default action, or choose another action.

Design

<fdp-split-menu-button
    [id]="splitbuttonID"
    [menu]="menuList"
    [compact]="true|false"
    [disabled]="true|false"// by default false
    [fdType]="standard|positive|medium|negative"
    [options]="emphasized|light|default"
    [buttonLabel]="first button"
    (buttonClicked)="onButtonClick()">
</fdp-split-menu-button>

Property Bindings

id: string

ID of the split button.

compact: boolean

Is button in compact mode or not.

disabled :boolean

To disable the split button.

fdType :string

Decides the type of split button. Applies to both first and second button/button with icon.

options: string

Decides the options for split button. Applies to both first and second button/button with icon.

buttonLabel: string

Label of the first button.

menu: string

Reference to menu which will be controlled by the split button.

---

Event Bindings

`buttonClicked``

Event triggered on click of button.

---

Two-Way Bindings

---

Content Projection

N/A

---

Template

  <button class="fd-button">{{primaryButtonLabel}}</button>
  <button class="fd-button" [type]="menu" 
    [menuTriggerFor]="menu"
    (click)="onButtonClick()"></button>

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• buttonLabel can be supported with string binding and fdp-menu-item with normal i18n markers

<fdp-split-menu-button
    [id]="splitbuttonID"
    [menu]="menuList"
    [compact]="true|false"
    [fdType]="standard|positive|medium|negative"
    [options]="emphasized|light|default"
    i18n-buttonLabel="@@btnLabel"
    buttonLabel="first button"
    (buttonClicked)="onButtonClick()">
</fdp-split-menu-button>
        
<fdp-menu #menuList id="basic-menu" [xPosition]="'before'">
   <fdp-menu-item (itemSelect)="onItemSelectCozy('First Item')" i18n="@@first">First Item</fdp-menu-item>
   <fdp-menu-item (itemSelect)="onItemSelectCozy('Second Item')" i18n="@@second">Second Item</fdp-menu-item>
   <fdp-menu-item (itemSelect)="onItemSelectCozy('Third Item')" i18n="@@third">Third Item</fdp-menu-item>
</fdp-menu>

Redesign Required: No

---

Notes

Questions

Kevin:

I've been working on designing a new Menu system which I feel is more flexible (see Menu/Menu Trigger document). Using the new Menu system we would not need to incorporate the Menu and Popover into the Split Button component. Instead we could design the Spit Button as just a button element and add a "trigger" directive to it, which will associate it with an independent Menu component.

Update it that means we don't need to have right? [focusTrapped]="true|false" [triggers]="['']" [closeOnOutsideClick]="true|false"

query: Will a split button exist without menu option? because FRD says both are buttons in split.

Design with MenuTrigger

<fdp-split-button [menu]="menu" (mainClick)="onMainClick()"></fdp-split-button>

Template:

<button (click)="onMainClick()"></button>
<button [menuTriggerFor]="menu"></button>

Updated the design as per review comments

Comments:

Deepak:

1. Currently MenuItem does not expose value to outside. so how split-menu-button will be able to get text value of menuItem clicked, **because PrimayButton value needs to be changed based on MenuItem selected. **
2. currently menu does not have default Item functionality. So requirement of Split-menu-button that clicking on primary button should select default marked MenuItem is not in scope. By Default first MenuItem is getting clicked.