Platform: Grouped Button Component V1.0 Technical Design - SAP/fundamental-ngx GitHub Wiki

Grouped Button Component

Summary

Also called Segmented buttons:

This is a composite component consisting of two or more normal buttons logically grouped. For each individual button, the functionality and design are as defined for normal button component.

In this 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.

Design

signature

 <fdp-buttons-group>
    <button fd-button-grouped [id]="'1'" [size]="'xs'" [glyph]="'survey'" [state]="'selected'"></button>
    <button fd-button-grouped [id]="'2'" [size]="'xs'" [glyph]="'pie-chart'"></button>
    <button fd-button-grouped [id]="'3'" [size]="'xs'" [glyph]="'pool'"></button>
<fdp-buttons-group>

Property Bindings in ==> button component V1.0

if it true then the button will act as a grouped button

    @HostBinding('class.fd-button--grouped')
    fdButtonGroupedClass: boolean = false;

if it true then the button will act as a grouped button

    multi: boolean = true|false;
if it is true user will have options to select more than 1 button at a time.

Event Bindings==> button Group component V1.0

setMutliselect()
// this will help to set mutiple buttons selected.
onChangeValues(data: any) {
 /**@Hiden**/
onChangeValues(data: any) {
    this.data = data;
    const clickedElement = data.target || data.srcElement;
    const isCertainButtonAlreadyActive = clickedElement.parentElement.querySelector(
      '.is-selected'
    );
    if (isCertainButtonAlreadyActive) {
      isCertainButtonAlreadyActive.classList.remove('is-selected');
      isCertainButtonAlreadyActive.classList.add('is-default');
      clickedElement.classList.remove('is-default');
      clickedElement.classList.add('is-selected');
    }
  }

This will fix the grouped button bugs found in fundamental-ngx/core.

  1. On select of another button previous button remains selected.
  2. On click, on the screen anywhere the selected button will become unselected.

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces

Related Modules

The following components and/or directives from @fundamental-ngx/core will be used:

i18n

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

Special Usecase: No

  • fdp-buttons-group attribute can be supported as:
<fdp-buttons-group>
    <button fd-button-grouped i18n="@@buttonA" [id]="'1'" [size]="'xs'" [glyph]="'survey'" [state]="'selected'"></button>
    <button fd-button-grouped i18n="@@buttonB" [id]="'2'" [size]="'xs'" [glyph]="'pie-chart'"></button>
    <button fd-button-grouped i18n="@@buttonC" [id]="'3'" [size]="'xs'" [glyph]="'pool'"></button>
<fdp-buttons-group>

Redesign Required: No

Additional Notes

Questions

from @Frank

  • You probably missunderstood on the meeting, you shoudl still hide the complexity inside and we agreed that we will go with the GroupBtnItem, but inside we will use existing directive and buttons from fundamentals
<fdp-buttons-group [multi]="true|false" size="xl" [buttons]="myList">
<fdp-buttons-group>

we coudl offer app developer to completly replace this with his/her implementation e.g.:

<fdp-buttons-group [multi]="true|false" size="xl" [list]="myList">
  <ng-template #item let-buttonItem>
      <my-crazy-button>
           {{buttonItem.label)
      <my-crazy-button>  
  </ng-template>
<fdp-buttons-group>
  • The rest is the same as we discuss on the meeting
  • Also as I commented on other places when we accept list of something lets use binding [list] it will be easier to manage from code

@Frank,@Kevin,

  • Can I use the existing fdp-button component to append features of the fd-button-group directive?
  • yes

@Manju,

In FRD it is mentioned max 3 buttons can be grouped. Does this mean I need to add any restrictions for the user not to add more than 3 and less than 2? As per my understanding user should have the freedom on number of buttons they want to add in the group. Please do let me know in case my understanding is wrong on this.

@Kit,kenny,

On hover and on select CSS colors for segmented/grouped button will be same as a normal button? if yes, then how I can calculate the values of colors if the grouped buttons are used in the different background color. For example: on behalf of the bar background color is #323C4C in this case How I have to decide? * We are using fundamentals we should redirect this question to them.

@Frank

  • Yes we should reuse existing buttons yes. Just like I already comment let;s not use btnxxx => btnSize we are working with buttons no need to say bTN in the binding, just size. The same applies for FD as fundamentals.

  • When dealing with button group we need to be able to specify if single / multi.

    • When I press 1 butotn others will pop ups. so only 1 button at the time is pushed
    • or multi mode where I can pre 1 or all.

  • Button should have a name / ID . I know we said that we dont need id but we will need it here the 'id'

  • Does it make sense to let application developer specify all these bindings every time? Wwhen we have button group in 99% we have size identical, so does other bindings.

    • let's have some bindings on hte button group as well, and button inside will inherit/
      • I can specify e.g. size only once

  • I woudl like to see also programatic way of assembing Button Groups, Introduce a interface to represent button

e.g. for the first case I mentioned it could be :

<fdp-buttons-group size="XL" click="clickEvent($event)" options="ddd">

<fdp-button
                      [fdButtonGroupedClass]=true
                      [btnState]="state" 
                      [glyph]="glyph"
                      [disabled]="disabled" 
                      [type]="type">Button Content
       </fdp-button>
  • Group buttons will have have some uniformity, It cant really happen that for 1 button we will have text for other not. This is why we should be able to have some bindings that could be applied here.

The programatic way could be:

<fdp-buttons-group [buttons]="buttonList"> 
<fdp-buttons-group>


export interface GroupBtnItem {
  size: number,
  state: BtnState,
  ... 
}
* but this is more nice to have
* Can button appear vertical ? 

      ==> Split button requirements speaks about it. As per my understanding, it handles it. 

        @Manju can confirm on the same

**ButtonGoupComponent.ts**
export interface GroupBtnItem {
                   size:string;
                   state:string;
                   options:string;
                   compress:boolean;
                   type:type;
}

import {GroupBtnItem} from ./GroupButtonItems;
@Component({
   selector: 'fdp-group-button',
   templateUrl: './buttonGroup.component.html',
   styleUrls: ['./buttonGroup.component.scss']
})
export class ButtonGoupComponent implements ngInit,GroupBtnItem{
//instance of the groupBtn it holds common values to all the buttons.
@Input() buttons: ButtonComponent[]=[];
@Input() size: string;
@Input() type:string;

        ngOninit(){}
}
}


**button-group.component.html**

<div class="fd-button--grouped" *ngFor="let grpButton of buttons">
         <fdp-button [id]='grpButton.id' [size]='grpButton.size'>
        {{grpButton.label}}
</fdp-button>   
</div>
**buttonGroupExample.component.html**
<fdp-buttons-group [buttons]="buttonList" [size]='xs' [type]='option'><fdp-buttons-group>
***buttonGroupExample.component.ts**
export class ButtonGoupeExampleComponent implements ngInit{
//instance of the groupBtn it holds common values to all the buttons.
@Input() buttonList: GroupBtnItems[]=[];
         
        ngOninit(){
        this.buttonList.push(new GroupBtnItem('button1', 'btn1'...));
        this.buttonList.push(new GroupBtnItem('button2', 'btn2',...));}
}
}

###** Review comments from 1 oct call:**

## Button Group

1). Button Groupe should support multi-select, add an attribute "[multi]= true" 
for this behavior - >  By Frank and Manav.

       ==>@Manju and @Kenny I need FRD and spec in case of multi-select.
 To see how the expected behavior at the end and UI should be.


2). User will not create an array of instances better approach
 is to allow then to add <button tag in view. Remove instance creation.-> By Frank and Kevin
                 Remove this approach
                      `  @Input() buttonList: GroupBtnItems[]=[];`
                       `           `
                       `          ngOninit(){`
                       `          this.buttonList.push(new GroupBtnItem('button1', 'btn1'...));`
                       `          this.buttonList.push(new GroupBtnItem('button2', 'btn2',...));}`

                Right approach
                       `<fdp-group-button>`
                       `<button fd-group-button [size]=xs.........../>`
                       `<button fd-group-button [size]=xs.........../>`
                       `<button fd-group-button [size]=xs.........../>`
                       `</fdp-group-button>`
       
 3). We don't have to use <fdp-button component and state, size etc in it,
 we can use the core directives directly here-->By Kevin and Frank 
 4). Remove other code samples from the page having the signature and properties of the button
 group is enough. -->By Frank.  
  5). We should not restrict the user to have the same size and type for all the buttons in the group. There could be seniors where user wants to place more content/image where they want to accommodate in the group. This restriction will break the intention of using group-->By Manav.
       *   Need confirmation on the from Manju and Frank.
Button Component.

1).fdp-button will not be used for group button, remove the code placed for grouped button.-->by Kevin
2). Do not use size for compact as it is used in group button-->By Kevin and Frank
3). Rename compress to compact, the core has the same, it makes the user to understand it in better way.--> By Frank and Kevin.
4). We will be having only disabled properties do not add state, it will be used while grouping button==> by Kevin
5). Create properties for [truncate] the text when it is long, share the approach in wikki==>By Frank and Kevin
⚠️ **GitHub.com Fallback** ⚠️