Skip to content

Platform: Grouped Button Component V1.0 Technical Design

Jump to bottom
sKudum edited this page Oct 2, 2019 · 63 revisions

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.

Design

buttonGroupExample.component.html/signature

 <fdp-buttons-group 
         [buttons]="buttonList" 
         [size]='xs'
         [type]='type'
         [options]='option'
         [compact]='true|false'>
<fdp-buttons-group>

buttonGroupExample.component.ts

export class ButtonGoupeExampleComponent implements ngInit{

//*****it holds the list of buttons added by user along with the values.***/

 @Input() buttonList: ButtonComponent[]=[];
          
         ngOninit(){
         this.buttonList.push(new ButtonComponent('button1', 'btn1'...));
         this.buttonList.push(new ButtonComponent('button2', 'btn2',...));}
}
}

Property Bindings in ==> button component V1.0

Along with the existing options in button component below options will be added in it

 `fdButtonGroupedClass: boolean = false;`

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

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

### `state: is-selected | is-disabled | is-default`
In state user can set the state of the button by default it will be in dafult state

Property Bindings in ==> button Group component V1.0

`@viewChildren('title') buttonCmps: Querylist<ButtonComponent>'
access the button component to set the size,type and options from group.
`@Input() type:string;`
`@Input() options: string;`
`@Input() size: small | xtra-small | large`

Button size can be set based on the form where it is placed as small, xtra small and large.

Implemented from GroupButton interface used for all the button components.

Event Bindings==> button Group component V1.0

 /**@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.

button-group-component.ts

**ButtonGoupComponent.ts**
import {GroupBtnItem} from ./GroupButtonItems;
@Component({
    selector: 'fdp-group-buttons',
    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.
 @viewChildren('title') buttonCmps: Querylist<ButtonComponent>;

//holds number of buttons added by user
 @Input() buttons: ButtonComponent[]=[];


 @Input() size: string;
 @Input() type:string;

constructor()
{
this.buttonCmps.foreach(e==> e.size ='this.size')}
this.buttonCmps.foreach(e==>e.options='this.option')}
this.buttonCmps.foreach(e==>e.type='this.type')}
}
 /**@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');
    }
  }

         ngOninit(){}
}
}

button-group.component.html

<div class="fd-button--grouped" *ngFor="let grpButton of buttons">
          <fdp-button [fdButtonGroupedClass]='true' [id]='grpButton.id' [size]='size' [type]='type'.......>
         {{grpButton.label}}
</fdp-button>   
</div>

button-GroupBtnItem.ts

export interface GroupBtnItem {
                   size?:string;
                   options?:string;
                   compress?:boolean;
                   type?:type;
}

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:

Additional Notes

Questions

@Frank,@Kevin,

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

@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

Clone this wiki locally