From c5c5e4900389785162ff293bec02f9fd963715b4 Mon Sep 17 00:00:00 2001 From: Ignat Ignatov Date: Sun, 17 Apr 2016 14:02:22 +0200 Subject: [PATCH 1/2] Allows setting the color and style button attributes at once. --- ionic/components/button/button.ts | 44 ++++++++++++++++++++++--------- 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 3e01cfbd6e..23f4b1afbf 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -27,7 +27,7 @@ import {isTrueProperty} from '../../util/util'; * @property [fab-center] - Position a fab button towards the center. * @property [fab-top] - Position a fab button towards the top. * @property [fab-bottom] - Position a fab button towards the bottom. - * @property [color] - Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc). + * @property [color] - Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc). * * @demo /docs/v2/demos/button/ * @see {@link /docs/v2/components#buttons Button Component Docs} @@ -135,20 +135,26 @@ export class Button { if (isTrueProperty(attrValue)) { this[type] = attrName; this._setClass(attrName, true); - } else { - this[type] = null; + // Special handling for '_style' which defaults to 'default'. + this[type] = (type === '_style' ? 'default' : null); + } + if (type === '_style') { + this._setColor(attrName, isTrueProperty(attrValue)); } } /** - * @input {string} Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc). + * @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc). */ @Input() - set color(val: string) { - this._assignCss(false); - this._colors = [val]; - this._assignCss(true); + set color(val: string|string[]) { + // Clear the colors for all styles including the default one. + this._setColor(BUTTON_STYLE_ATTRS.concat(['default']), false); + // Support array input which is also supported via multiple attributes (e.g. primary, secondary, etc). + this._colors = (val instanceof Array ? val : [val]); + // Set the colors for the currently effective style. + this._setColor(this._style, true); } constructor( @@ -289,11 +295,7 @@ export class Button { this._setClass(this._display, assignCssClass); // button-full this._setClass(this._size, assignCssClass); // button-small this._setClass(this._icon, assignCssClass); // button-icon-left - - let colorStyle = (this._style !== 'default' ? this._style + '-' : ''); - this._colors.forEach(colorName => { - this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary - }); + this._setColor(this._style, assignCssClass); // button-secondary, button-clear-secondary } } @@ -305,6 +307,22 @@ export class Button { this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type.toLowerCase(), assignCssClass); } } + + /** + * @private + */ + private _setColor(type: string|string[], assignCssClass: boolean) { + if (type && this._init) { + // 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.toLowerCase() + '-' : ''); + this._colors.forEach(colorName => { + this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary + }); + }); + } + } /** * @private From 8abc52997fde031be4f8e58a9a77b437a7bc5688 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 26 Apr 2016 19:21:04 -0400 Subject: [PATCH 2/2] test(button): add e2e test for dynamic button styles and colors references #6202 --- ionic/components/button/test/dynamic/e2e.ts | 4 ++ ionic/components/button/test/dynamic/index.ts | 49 +++++++++++++++++++ .../components/button/test/dynamic/main.html | 19 +++++++ 3 files changed, 72 insertions(+) create mode 100644 ionic/components/button/test/dynamic/e2e.ts create mode 100644 ionic/components/button/test/dynamic/index.ts create mode 100644 ionic/components/button/test/dynamic/main.html diff --git a/ionic/components/button/test/dynamic/e2e.ts b/ionic/components/button/test/dynamic/e2e.ts new file mode 100644 index 0000000000..47146173b6 --- /dev/null +++ b/ionic/components/button/test/dynamic/e2e.ts @@ -0,0 +1,4 @@ + +it('should unify buttons', function() { + element(by.css('.e2eButtonDynamicUnify')).click(); +}); diff --git a/ionic/components/button/test/dynamic/index.ts b/ionic/components/button/test/dynamic/index.ts new file mode 100644 index 0000000000..48d055eb66 --- /dev/null +++ b/ionic/components/button/test/dynamic/index.ts @@ -0,0 +1,49 @@ +import {App, IonicApp} from 'ionic-angular'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp { + isDestructive: boolean; + isSecondary: boolean; + isCustom: boolean; + isOutline: boolean; + isClear: boolean; + isClicked: boolean; + myColor1: string; + myColor2: string; + multiColor: Array; + + constructor() { + this.reset(); + } + + unify() { + this.isDestructive = false; + this.isSecondary = false; + this.isCustom = false; + this.isOutline = false; + this.isClear = false; + this.isClicked = false; + this.myColor1 = 'primary'; + this.myColor2 = 'primary'; + this.multiColor = ['primary']; + } + + reset() { + this.isDestructive = true; + this.isSecondary = true; + this.isCustom = true; + this.isOutline = true; + this.isClear = true; + this.isClicked = false; + this.myColor1 = 'custom1'; + this.myColor2 = 'custom2'; + this.multiColor = ['primary','secondary']; + } + + toggle() { + this.isClicked = !this.isClicked; + } +} diff --git a/ionic/components/button/test/dynamic/main.html b/ionic/components/button/test/dynamic/main.html new file mode 100644 index 0000000000..c864beb456 --- /dev/null +++ b/ionic/components/button/test/dynamic/main.html @@ -0,0 +1,19 @@ + + + Default Buttons + + + +

Button Attributes Test

+ + + + + + + + +
+ + +