diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index e1cae9b8cb4..76ddd2c0616 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -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
});
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
index e3238003b5c..45af41454d0 100644
--- a/ionic/components/button/test/button.spec.ts
+++ b/ionic/components/button/test/button.spec.ts
@@ -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', () => {
diff --git a/ionic/components/button/test/dynamic/index.ts b/ionic/components/button/test/dynamic/index.ts
index 48d055eb669..bea98254840 100644
--- a/ionic/components/button/test/dynamic/index.ts
+++ b/ionic/components/button/test/dynamic/index.ts
@@ -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;
diff --git a/ionic/components/button/test/dynamic/main.html b/ionic/components/button/test/dynamic/main.html
index 064894f60a7..65e6fc8b9fd 100644
--- a/ionic/components/button/test/dynamic/main.html
+++ b/ionic/components/button/test/dynamic/main.html
@@ -1,11 +1,16 @@
+
+
+
Default Buttons
+
+
+
-
- Button Attributes Test
-
+
+