Skip to content

Platform: Button Component V1.0 Technical Design

Jump to bottom
Frantisek Kolar edited this page Sep 27, 2019 · 20 revisions

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"
         [size]="size"
         [glyph]="glyph"
         [disabled]="disabled" 
         (click)="onBtnClick($event)"
         [fdType]="type">Button Content</fdp-button>

Property Bindings

size: sizeType

The "size" property allows the user to set the sizes of the button such as small. Which will act as compact button. small=> button height will be 28px. default or no value set==> 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:

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.

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 requirements to truncate ?
  • Since fd is directive you are free to specific your own width, so maybe we should keep this behavior.
  • 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.

Clone this wiki locally