Skip to content

Platform: Button Component V1.0 Technical Design

Jump to bottom
kavya-b edited this page May 13, 2020 · 20 revisions

Grouped Button Component

Summary

The button lets users trigger an action by clicking or tapping it, or by pressing certain keys, such as Enter or the space bar.

Design

 <fdp-button 
         [options]="options"
         [compact]="true|false"
         [glyph]="glyph"
         [disabled]="disabled" 
         (click)="onBtnClick($event)"
         [type]="type">Button Content</fdp-button>

Property Bindings

compact: boolean

The "compact" property allows the user to compress it. It will act as compact button. compressed=> button height will be 28px. non compressed==> height will be 36px.

glyph: string

The icon to include in the button

disabled: boolean

For making button disabled. Default value:false ==>Button will be enabled true==> button will be disabled.

type: ButtonType

The type of the button. *Types include 'standard', 'positive', 'medium', and 'negative'. *Empty for default (button)

options: ButtonOptions | ButtonOptions[]

ButtonOptions include 'light' | 'emphasized' | ''

Event Bindings

buttonClicked = new EventEmitter();

  • The "buttonClicked" event binding emits an event whenever user clicks on button.

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-button can be supported as:
<fdp-button 
         i18n="@@buttonContent"
         [options]="options"
         [compact]="true|false"
         [glyph]="glyph"
         [disabled]="disabled" 
         (click)="onBtnClick($event)"
         [type]="type">
         Button Content
</fdp-button>

Redesign Required: No

Additional Notes

Questions

  • Does button label should be truncated and appended with an ellipsis? Or it should be responsive based on the content entered and user should be taking care from when on they can have truncation.

example:

<fdp-button width='30px'.........

then css will be: width: 30px; (user input value) overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;

*According to spec tooltips should have a black background color. Whereas fundamentals do not have it. Should behave the black background in @ariba-pi/platform as specs are more specific to Ariba? or I can have the same in @fundamental-ngx/platform which will be used by non Ariba products as well?

Frank

  • There should be one specs aligned with fiori 3
  • We are not really making things specifics to Ariba more Fiori3, we take things from ariba to enhance existing requirements, but in terms of colors, it should stay Fiori3. We will be using theming that will be defined once using css variables and with custom colors we woudl mess it up. @ariba-pi/platform needs to follow also Fiori 3 scheme. Here might have some some Ariba specific components but it does not mean we will not inherit Fiori 3 styling.

Kit and Manju* need your confirmation on this as well.

Frank:

  • Button size: Current behavior have two sizes that pre-sets the width and height, if the text is larger I think it will take up full available width and button gets wider. Is there a requirement to truncate ? ==>_truncation requirement I got yesterday in FRD, tho design is not yet available on this._

  • Since fd is directive you are free to specific your own width, so maybe we should keep this behavior. => _I agree more flexibility to user in this case_

  • when we introduce width we need to also create some kind of content wrapping strategy, that by default do full width like it is now or truncate.

  • User shoudl have a choice, truncate yes /no => possible, in this case we need the limitation of expected width

<fdp-button [truncate]='on' [width]='30px'

then in my ts will be: if(turncate && width!=0) { elementref._addClass......(truncation); }

.truncation{ width: 30px; (user input value) overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis; }

  • Now default width is taken from --fd-form-height in fundamental-ngx/core. As per my understanding width is set based on the real estate available.

  • We should not forget also about Anchors (so maybe make option) to render it as button or hyperlink

*@Frank: for Grouped buttons we have an attribute called size which handles the size of small, xs, and largely based on the form where it is placed, hence to have a compact mode in button, placing an attribute called compressed to avoid ambiguity when fdp button is used along with grouped-buttons.

  • ??? What is the relation between size (xs,s,m) and size of the button. Developer gets confused, can we maybe do some mapping and combine them together with buttons sizes?
  • Need confirmation on the same from Frank

/from Group button review call -1st oct 2019/

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

##Notes: Manju

  1. Button design should have provision for configuring buttons as segmented buttons(basically action button group should be merged with button) or toggle button.
  2. Based on Mar-11-2020 update for Fiori3 button, we need to have provision for 'badge on button'.
Clone this wiki locally