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.