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. Some buttons can be flagged as "persistent" using the directive fdp-action-button-persist, which will prevent the button from being collapses into the overflow menu. Additionally, the component should have a "collapse" flag for which all of the buttons will be contained in the "overflow" menu, except for buttons flagged with fdp-action-button-persist.

Example

<fdp-action-button-group [maxCount]="3" [compact]="true" [collapse]="true">
   <fdp-button fdp-action-button-persist>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.

collapse: boolean

Whether or not to collapse all buttons into a single overflow menu.

Projected Content

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

---

i18n

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

Special Usecase: No

• Each item can be supported with simply i18n marker

<fdp-button i18n="@@one">One</fdp-button>

Redesign Required: No

---