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"
    [(isOpen)]="true|false"
    [compact]="true|false"
    [glyph]="'sap-icon--slim-arrow-down'"// any image icon
    [disabled]="true|false"// by default false
    [fdType]="standard|positive|medium|negative"
    [options]="emphasized|light|default"
    [groupLabel]="button group"
    [primaryButtonLabel]="first button"
    [secondaryButtonLabel]="second button"
    (primaryButtonClicked)="primaryButtonClicked()"
    (secondaryButtonClicked)="secondaryButtonClicked()"
    (isOpenChange)="onPopoverChange()">
</fdp-split-menu-button>

Property Bindings

id: string

ID of the split button.

compact: boolean

Is button in compact mode or not.

glyph: string

The name of icon to display for secondary button. Default is 'sap-icon--slim-arrow-down'.

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.

primaryButtonLabel: string

Label of the first button.

secondaryButtonLabel: string

Label of second button.

menu: string

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

---

Event Bindings

`primaryButtonClicked``

Event triggered on click of first button.

secondaryButtonClicked

Event triggered on click of second button.

isOpenChange

Event triggered when is open popover changed.

---

Two-Way Bindings

isOpen: boolean

The popover is open or closed.

---

Content Projection

N/A

---

Template

<div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="{{groupLabel}}">
  <button class="fd-button"
    (click)="onPrimaryButtonClick()">{{primaryButtonLabel}}</button>
  <button class="fd-button"
    [menuTriggerFor]="menu"
    (click)="onSecondaryButtonClick()"
    aria-label="{{secondaryButtonLabel}}"></button>
</div>

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 exists 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>