Platform: Segmented Button Component Technical Design

Segmented Button

Summary

The Segmented component designates a group of buttons to be displayed together as continuous block of elements.

Example

<fdp-segmented-button [label]="'Group Label'">
   <fdp-button>Button A</fdp-button>
   <fdp-button>Button B</fdp-button>
   <fdp-button>Button C</fdp-button>
</fdp-segmented-button>

Property Bindings

label:String

Aria-label for button group.

Template

<div class="fd-button-group" role="group" [attr.aria-label]="{{label}}">
    <ng-content></ng-content>
</div>

---

i18n

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

Special Usecase: No

• fdp-segmented-button's label attribute can be supported with i18n-label and string binding with label="<custom-label>":

<fdp-segmented-button i18n-label="@@groupLabel" label="Group Label">
   <fdp-button i18n="@@buttonA">Button A</fdp-button>
   <fdp-button i18n="@@buttonB">Button B</fdp-button>
   <fdp-button i18n="@@buttonC">Button C</fdp-button>
</fdp-segmented-button>

Redesign Required: No

---

Notes

We may be able to use the Fundamental NGX:Core implementation of Segmented Button, but we may need to check whether the Core version works with our Platform Button.

From Sushma

• We have a segmented button type in Fiori3. But no action button group and button group.

I've changed the name from "Button Group" to "Segmented Button" to match Fiori 3 and Core naming

In design we have:

1. ActionButtonGroup.
2. Button group. which one we have to consider while developing it.

They are separate components. "Button Group/Segmented Button" is a Fiori specified design for grouping buttons together. "Action Button Group" is an internal Fundamental-NGX platform component - it is meant to add the action button overflow behavior to a group of buttons.

In several of our composite components, like Shell Bar and Action Bar, we have the requirement to handle button overflow - i.e. when the page is small enough, the action buttons collapse into an overflow menu. Instead of handling this requirement separately for each component, we can define an "Action Button Group" component to handle this behavior, and use it within the composite components.