Button
Definition
<cst-button>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-lr-icon/>
<sub-lr-icon/>
<sub-help-icon/>
<sub-feature-flag/>
</cst-button>
Example
<cst-button id="" value="">
<sub-theme name="" clr-var1="" clr-var2=""/>
<sub-font name="" font-var1="" font-var2=""/>
<sub-style name="" width="" height=""/>
<sub-access can-view="" can-modify=""/>
<sub-lr-icon name="mobile" position="left"/>
<sub-help-icon name="help" position="right" title="" link="">/>
<sub-feature-flag disable-ripple="" disable-uppercase=""/>
</cst-button>
OR
<cst-element name="button" schema="" schema-prop="" value=""/>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component |
| value | string type | Label to be shown on button. |
| title | string type | Button Tooltip |
| disabled | boolean type | Specifies if button has to be disabled.(aurelia ext attribute) |
| autofocus | boolean type | Specifies if component should be focused when loaded. |
| href | string type | Url to redirect on button click. |
| class | cst-mat-text cst-mat-outlined cst-mat-raised (default if material design) cst-mat-unelevated cst-mat-shaped | Specifies class to be applied(Multiple classes can be given with space).|
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| array type | Specifies icons to be displayed. | |
| object type | Specifies help icon to be displayed. | |
| object type | Specifies features to enable/disable. | |
| others | object type | Any other info. |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom | Name of the theme. |
| clr-label | string type | If custom then specific/ named color variables |
sub-font
| Property | Value | Description |
|---|---|---|
| name | roboto (default)/custom | Name of the font |
| font-text | string type | If custom then specific/ named font variables. |
| font-label | string type | |
| font-error | string type |
sub-style
| Property | Value | Description |
|---|---|---|
| name | material/skeuomorphic(standard/outlined/text) | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
sub-lr-icons
(a.k.a left right icons)
| Property | Value | Description |
|---|---|---|
| name | string type | Icon name. |
| position | left/right | Position of the icon. |
| title | string type | Icon tooltip |
sub-help-icon
| Property | Value | Description |
|---|---|---|
| name | string type | Icon name. |
| position | left/right | Position of the icon. |
| title | string type | Icon tooltip |
| link | string type | Link to be opened on click. |
sub-feature-flag
| Property | Value | Description |
|---|---|---|
| disable-ripple | boolean type | Disables ripple effec when given true. |
| disable-uppercase | boolean type | Disables Upper case when showing button label. |
| is-icon-button | boolean type | Whether the button is icon button. |
| is-round-button | boolean type | Whether the button is round. |
Schema Examples
Example1
let schema = {
type: "object",
properties: {
btnSaveCustomer: {
type: "string",
title:"Click to Save",//= tooltip
cstAttr: {
elementName: 'button',
raw:{ //loop & add to element
disabled : true,
autofocus : false,
class:'',
href:''
},
others:{
}
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
},
subStyle: {
name:'',
width:'', //percentage/pixels,string
height:'',
fontSize:''
},
subLrIcons:[{
name:'',
position:'',
title: ''
}],
subHelpIcon: {
name: '',
position: '',
title:'',
link:''
},
subFeatureFlag: {
disableRipple: true,
disableUppercase: true,
isIconButton: false,
isRoundButton: false
}
}
}
}
}
let schemaProp = 'btnSaveCustomer';
let value = 'Save'
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Common Note:
Material Measurements Guidelines
Contained Button
- min-width = 64px
- height = 36px
- padding left and right = 16px
Contained Button with icon
- min-width = 64px
- height = 36px
- padding left = 12px
- padding right = 16px
- icon dimensions = 18X18
- icon margin right = 8px
Outlined Button
- min-width = 64px
- height = 36px
- padding left and right = 16px
- border = 1px
Text Button
- min-width = 64px
- height = 36px
- padding left and right = 8px
Events
| Attribute | Description |
| onClick | Triggered when button is clicked. |
Event Method signature
method(parentRefObj, evtObj, elm, others)
Parameters description
| Parameter | Value | Description |
|---|---|---|
| parentRefObj | parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext } | Parent Context references |
| evtObj | object | Event object |
| elm | object | Element value |
| others | any | Other value |
Over-ridable Classes
- cst-ovr-button-elm
- cst-ovr-button
- cst-ovr-button-label
- cst-ovr-button-left-icon
- cst-ovr-button-right-icon
- cst-ovr-button-hover
- cst-ovr-button-disabled
- cst-ovr-button-pressed
Unit test Screenshots
Responsiveness Test Screenshots
Design Images
Demo link
Points
- Show state indication (disabled/ hover/ pressed)
- Help icon
- fonts (Roboto Condensed - ALL CAPS BOLD - 14)
- event callback consistency
- if large helper text wrap (mobile/ web)
- Should we add toggle button/icon feature in same component or they will be 2 different components?
- ignore uppercase property?
- accessibility in mind
- over-rideable classes for button, hover, pressed
- adds material design measurements
- unit test screen shots
- ui + responsive test screen shots
- component demo link
- bring designer's images in docs
- For toggling button create different component, and show/hide two different buttons in that component.