diff --git a/src/components/action-sheet/test/basic/app-module.ts b/src/components/action-sheet/test/basic/app-module.ts index afde358b16f..28dac4b36e2 100644 --- a/src/components/action-sheet/test/basic/app-module.ts +++ b/src/components/action-sheet/test/basic/app-module.ts @@ -158,7 +158,7 @@ export class E2EPage { - + Modal diff --git a/src/components/alert/test/basic/app-module.ts b/src/components/alert/test/basic/app-module.ts index 61620eb60bd..9282f4506c2 100644 --- a/src/components/alert/test/basic/app-module.ts +++ b/src/components/alert/test/basic/app-module.ts @@ -297,7 +297,7 @@ export class E2EPage { - + Modal diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss index 7d96190e5aa..1de591ab832 100644 --- a/src/components/button/button.ios.scss +++ b/src/components/button/button.ios.scss @@ -312,3 +312,11 @@ $button-ios-round-border-radius: $button-round-border-radius @include ios-button-outline($color-name, $color-base, $color-contrast); @include ios-button-clear($color-name, $color-base, $color-contrast); } + + +// iOS strong Button +// -------------------------------------------------- + +.button-strong-ios { + font-weight: bold; +} diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss index 1f029727a71..29cec466058 100644 --- a/src/components/button/button.md.scss +++ b/src/components/button/button.md.scss @@ -424,3 +424,11 @@ $button-md-round-border-radius: $button-round-border-radius !def @include md-button-outline($color-name, $color-base, $color-contrast); @include md-button-clear($color-name, $color-base, $color-contrast); } + + +// MD strong Button +// -------------------------------------------------- + +.button-strong-md { + font-weight: bold; +} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index d2222ed2784..41c4ec59773 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -138,6 +138,9 @@ export class Button extends Ion { /** @private */ _display: string; // block/full + /** @private */ + _decorator: string; // strong + /** @private */ _init: boolean; @@ -213,6 +216,14 @@ export class Button extends Ion { this._attr('_display', 'full', val); } + /** + * @input {boolean} A button that has strong importance, ie. it represents an important action. + */ + @Input() + set strong(val: boolean) { + this._attr('_decorator', 'strong', val); + } + /** * @input {string} The mode to apply to this component. */ @@ -301,6 +312,7 @@ export class Button extends Ion { this._setClass(this._shape, assignCssClass); // button-round this._setClass(this._display, assignCssClass); // button-full this._setClass(this._size, assignCssClass); // button-small + this._setClass(this._decorator, assignCssClass); // button-strong this._updateColor(this._color, assignCssClass); // button-secondary, bar-button-secondary } } diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss index 2babcb5487f..b26af15f611 100644 --- a/src/components/button/button.wp.scss +++ b/src/components/button/button.wp.scss @@ -315,3 +315,11 @@ $button-wp-round-border-radius: $button-round-border-r @include wp-button-outline($color-name, $color-base, $color-contrast); @include wp-button-clear($color-name, $color-base, $color-contrast); } + + +// WP strong Button +// -------------------------------------------------- + +.button-strong-wp { + font-weight: bold; +} diff --git a/src/components/button/test/decorator/app-module.ts b/src/components/button/test/decorator/app-module.ts new file mode 100644 index 00000000000..075a2068dd2 --- /dev/null +++ b/src/components/button/test/decorator/app-module.ts @@ -0,0 +1,32 @@ +import { Component, NgModule } from '@angular/core'; +import { IonicApp, IonicModule } from '../../../..'; + + +@Component({ + templateUrl: 'main.html' +}) +export class E2EPage { + strong = false; +} + +@Component({ + template: '' +}) +export class E2EApp { + rootPage = E2EPage; +} + +@NgModule({ + declarations: [ + E2EApp, + E2EPage + ], + imports: [ + IonicModule.forRoot(E2EApp) + ], + bootstrap: [IonicApp], + entryComponents: [ + E2EPage + ] +}) +export class AppModule {} diff --git a/src/components/button/test/decorator/e2e.ts b/src/components/button/test/decorator/e2e.ts new file mode 100644 index 00000000000..3333a33320b --- /dev/null +++ b/src/components/button/test/decorator/e2e.ts @@ -0,0 +1,4 @@ + +it('should click edit button', function() { + element(by.css('.e2eButtonEdit')).click(); +}); diff --git a/src/components/button/test/decorator/main.html b/src/components/button/test/decorator/main.html new file mode 100644 index 00000000000..118ac14ec16 --- /dev/null +++ b/src/components/button/test/decorator/main.html @@ -0,0 +1,57 @@ + + + + Outline Buttons + + + + + + + + + + +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +
diff --git a/src/components/modal/test/basic/app-module.ts b/src/components/modal/test/basic/app-module.ts index 088895eab1f..7684d537a5a 100644 --- a/src/components/modal/test/basic/app-module.ts +++ b/src/components/modal/test/basic/app-module.ts @@ -329,7 +329,7 @@ export class ToolbarModal { - + Modal w/ Inputs @@ -415,7 +415,7 @@ export class ContactUs { First Page Header - + diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 51153463905..081c582cd89 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -359,3 +359,11 @@ $navbar-ios-height: $toolbar-ios-height !default; @include ios-bar-button-outline($color-name, $color-base, $color-contrast); @include ios-bar-button-solid($color-name, $color-base, $color-contrast); } + + +// iOS strong Button +// -------------------------------------------------- + +.bar-button-strong-ios { + font-weight: bold; +} diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss index 4cbb41568e7..9b0fbff00c4 100644 --- a/src/components/toolbar/toolbar.md.scss +++ b/src/components/toolbar/toolbar.md.scss @@ -381,3 +381,11 @@ $navbar-md-height: $toolbar-md-height !default; @include md-bar-button-outline($color-name, $color-base, $color-contrast); @include md-bar-button-solid($color-name, $color-base, $color-contrast); } + + +// MD strong Button +// -------------------------------------------------- + +.bar-button-strong-md { + font-weight: bold; +} diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss index 490c0b40ac2..da30c1f57e2 100644 --- a/src/components/toolbar/toolbar.wp.scss +++ b/src/components/toolbar/toolbar.wp.scss @@ -328,3 +328,11 @@ $navbar-wp-height: $toolbar-wp-height !default; @include wp-bar-button-outline($color-name, $color-base, $color-contrast); @include wp-bar-button-solid($color-name, $color-base, $color-contrast); } + + +// WP strong Button +// -------------------------------------------------- + +.bar-button-strong-wp { + font-weight: bold; +}