Platform: Action Button Group Component Technical Design

ActionButtonGroup

Summary

The ActionButtonGroup manages overflow of the action buttons within its content, as well as responsiveness. The ActionButtonGroup can contain any number of buttons. If the button count exceeds the maximum number of buttons allowed then the extra buttons will "overflow" into a dropdown menu. Additionally, if the screen size is reduced to a "small" screen size then all of the buttons will be contained in the "overflow" menu.

Example

<fdp-action-button-group [maxCount]="3" [compact]="true">
   <fdp-button>One</fdp-button>
   <fdp-button>Two</fdp-button>
   <fdp-button>Three</fdp-button>
   <fdp-button>Four</fdp-button>
</fdp-action-button-group>

Design

Property Bindings

maxCount: number

Maximum number of buttons before "overflow" feature is applied. Default: 3.

compact: boolean

Whether or not to display overflow button in compact mode.

Projected Content

The content of the ActionButtonGroup can contain any number of buttons.

Notes

@Manju:

1. As per Fiori3, developers should be able to configure group of buttons(more than one) as segmented buttons where they act as radio button group. This is waht Fiori states: "A segmented button shows a group of options. Only one of the options can be active, the others remain or become inactive. Pressing an option activates it. By default, the control for segmented buttons calculates the button width and applies it to all buttons within the group. You can change this by setting the width for individual buttons.

The segmented button is comparable to a radio button group control." https://ux.wdf.sap.corp/fiori-design-web/button/

2. this should be part of button design and should no more be a separate component.