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"
    [menuTriggerFor]="menu"
    (click)="onButtonClick()"></button>

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 [type]="menu" [menuTriggerFor]="menu"></button>