javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/button/button.ts
View File

@ -331,7 +331,9 @@ export class Button {
// Support array to allow removal of many styles at once. // Support array to allow removal of many styles at once.
let styles = (type instanceof Array ? type : [type]); let styles = (type instanceof Array ? type : [type]);
styles.forEach(styleName => { 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._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
}); });

16
ionic/components/button/test/button.spec.ts
View File

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

3
ionic/components/button/test/dynamic/index.ts
View File

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

11
ionic/components/button/test/dynamic/main.html
View File

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