refactor(button): add ion-button attribute and icon attributes to style buttons

BREAKING CHANGES:

- `<button>` becomes `<button ion-button>`
- `<a button>` becomes `<a ion-button>`
- `<button ion-item>` does not get the `ion-button` attribute
- Buttons inside of `<ion-item-options>` do get the `ion-button`
attribute
- Removed the `category` attribute, this should be passed in
`ion-button` instead.
- Button attributes added for icons in buttons: `icon-only`,
`icon-left`, and `icon-right`

closes #7466
This commit is contained in:
Brandy Carney
2016-08-16 17:11:02 -04:00
parent 90929d0ef9
commit 938864e8d0
179 changed files with 1393 additions and 1081 deletions

View File

@ -24,7 +24,7 @@ import { ViewController } from '../nav/view-controller';
template: `
<div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>
<div class="picker-opts" #colEle [style.width]="col.optionsWidth">
<button *ngFor="let o of col.options; let i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [style.webkitTransform]="o._trans" [style.webkitTransitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button" category="picker-opt">
<button ion-button="picker-opt" *ngFor="let o of col.options; let i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [style.webkitTransform]="o._trans" [style.webkitTransitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button">
{{o.text}}
</button>
</div>
@ -355,7 +355,7 @@ export class PickerColumnCmp {
<div class="picker-wrapper">
<div class="picker-toolbar">
<div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
<button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
<button ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
{{b.text}}
</button>
</div>

View File

@ -9,19 +9,19 @@
<ion-content padding>
<button block class="e2eTwoColumns" (click)="twoColumns()">
<button ion-button block class="e2eTwoColumns" (click)="twoColumns()">
2 Columns
</button>
<button block class="e2ePrefixLabel" (click)="prefixLabel()">
<button ion-button block class="e2ePrefixLabel" (click)="prefixLabel()">
Prefix Label
</button>
<button block class="e2eSuffixLabel" (click)="suffixLabel()">
<button ion-button block class="e2eSuffixLabel" (click)="suffixLabel()">
Suffix Label
</button>
<button block class="e2eColumnSizesLabel" (click)="columnSizes()">
<button ion-button block class="e2eColumnSizesLabel" (click)="columnSizes()">
Columns with sizes
</button>