fix(button): add the solid class to bar buttons

updated tests to include toolbar with solid buttons and bar buttons in
karma tests.

references #6202
This commit is contained in:
Brandy Carney
2016-04-27 13:11:51 -04:00
parent cc50814696
commit 658b29b827
4 changed files with 30 additions and 4 deletions

View File

@ -331,7 +331,9 @@ export class Button {
// Support array to allow removal of many styles at once.
let styles = (type instanceof Array ? type : [type]);
styles.forEach(styleName => {
let colorStyle = (styleName !== null && styleName !== 'default' && styleName !== 'solid' ? styleName.toLowerCase() + '-' : '');
// If the role is not a bar-button, don't apply the solid style
styleName = (this._role !== 'bar-button' && styleName === 'solid' ? 'default' : styleName);
let colorStyle = (styleName !== null && styleName !== 'default' ? styleName.toLowerCase() + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});

View File

@ -64,6 +64,13 @@ export function run() {
expect(hasClass(b, 'button-solid')).toEqual(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
expect(hasClass(b, 'button-secondary')).toEqual(true);
b = mockButton(['solid', 'primary', 'secondary']);
b.setRole('bar-button');
b._assignCss(true);
expect(hasClass(b, 'bar-button-solid')).toEqual(true);
expect(hasClass(b, 'bar-button-solid-primary')).toEqual(true);
expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
});
it('should auto add the default style', () => {
@ -99,12 +106,21 @@ export function run() {
b._assignCss(true);
expect(hasClass(b, 'button-outline')).toEqual(true);
b = mockButton(['solid']);
b._assignCss(true);
expect(hasClass(b, 'button-solid')).toEqual(true);
b = mockButton(['clear', 'outline', 'small', 'full']);
b._assignCss(true);
expect(hasClass(b, 'button-clear')).toEqual(false);
expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true);
b = mockButton(['outline']);
b.setRole('bar-button');
b._assignCss(true);
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
});
it('should read button shape attributes', () => {

View File

@ -8,6 +8,7 @@ class E2EApp {
isDestructive: boolean;
isSecondary: boolean;
isCustom: boolean;
isSolid: boolean;
isOutline: boolean;
isClear: boolean;
isClicked: boolean;
@ -23,6 +24,7 @@ class E2EApp {
this.isDestructive = false;
this.isSecondary = false;
this.isCustom = false;
this.isSolid = false;
this.isOutline = false;
this.isClear = false;
this.isClicked = false;
@ -35,6 +37,7 @@ class E2EApp {
this.isDestructive = true;
this.isSecondary = true;
this.isCustom = true;
this.isSolid = true;
this.isOutline = true;
this.isClear = true;
this.isClicked = false;

View File

@ -1,11 +1,16 @@
<ion-toolbar>
<ion-buttons start>
<button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons end>
<button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
</ion-buttons>
</ion-toolbar>
<ion-content padding text-center>
<h1>Button Attributes Test</h1>
<button block>Primary</button>
<ion-content padding>
<button block [solid]="isSolid">Solid</button>
<button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
<button block [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">Secondary (Clear)</button>
<button block [color]="myColor1" [round]="isCustom">Custom #1</button>