-
Notifications
You must be signed in to change notification settings - Fork 135
Platform: Button Component V1.0 Technical Design
The button lets users trigger an action by clicking or tapping it, or by pressing certain keys, such as Enter or the space bar.
<fdp-button
[options]="options"
[compress]="compress"
[glyph]="glyph"
[disabled]="disabled"
(click)="onBtnClick($event)"
[type]="type">Button Content</fdp-button>The "compress" 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.
The icon to include in the button
For making button disabled. Default value:false ==>Button will be enabled true==> button will be disabled.
The type of the button. *Types include 'standard', 'positive', 'medium', and 'negative'. *Empty for default (button)
ButtonOptions include 'light' | 'emphasized' | ''
- The "buttonClicked" event binding emits an event whenever user clicks on button.
N/A
N/A
The following components and/or directives from @fundamental-ngx/core will be used:
- 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/platformneeds 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.
*@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.- Need confirmation on the same from Frank