diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 58a710da14..2427a568b7 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -40,6 +40,7 @@ export class Button { renderer: Renderer, @Attribute('type') type: string ) { + let element = elementRef.nativeElement; if (config.get('hoverCSS') === false) { @@ -51,7 +52,9 @@ export class Button { return; } - renderer.setElementAttribute(elementRef, 'class', 'button'); + renderer.setElementClass(elementRef, 'button', true); + + this.attrToClass(renderer, elementRef); if (type) { renderer.setElementAttribute(elementRef, type, ''); @@ -95,7 +98,47 @@ export class Button { } + attrToClass(renderer, elementRef) { + // looping through native dom attributes, eww + // https://github.com/angular/angular/issues/1818 + + let element = elementRef.nativeElement; + let attrs = element.attributes; + let btnAttrs = []; + + BUTTON_SIZE_ATTRS.forEach(buttonAttr => { + if (element.hasAttribute(buttonAttr)) { + renderer.setElementClass(elementRef, 'button-' + buttonAttr, true); + } + }); + + BUTTON_TYPE_ATTRS.forEach(buttonAttr => { + if (element.hasAttribute(buttonAttr)) { + renderer.setElementClass(elementRef, 'button-' + buttonAttr, true); + btnAttrs.push(buttonAttr); + } + }); + + let attrName; + for (let i = 0, l = attrs.length; i < l; i++) { + attrName = attrs[i].name; + if (attrs[i].value === '' && COMMON_HTML_ATTR.test(attrName) !== true && BUTTON_TYPE_ATTRS.indexOf(attrName) < 0 && BUTTON_SIZE_ATTRS.indexOf(attrName) < 0) { + if (btnAttrs.length) { + btnAttrs.forEach(buttonAttr => { + renderer.setElementClass(elementRef, 'button-' + buttonAttr + '-' + attrName, true); + }); + } else { + renderer.setElementClass(elementRef, 'button-' + attrName, true); + } + } + } + } + } +const COMMON_HTML_ATTR = /id|class|type|href|ng-/; +const BUTTON_TYPE_ATTRS = ['block', 'full', 'round', 'clear', 'outline']; +const BUTTON_SIZE_ATTRS = ['large', 'small']; + const TEXT = 1; const ICON = 2; diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss index 949d03d2c1..ad6876d241 100644 --- a/ionic/components/button/modes/ios.scss +++ b/ionic/components/button/modes/ios.scss @@ -26,7 +26,6 @@ $button-ios-border-radius: 4px !default; padding: $button-ios-padding; min-height: $button-ios-height; - line-height: $button-ios-height; font-size: $button-ios-font-size; border-radius: $button-ios-border-radius; diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index fea32031cc..5ad83d1837 100644 --- a/ionic/components/button/modes/md.scss +++ b/ionic/components/button/modes/md.scss @@ -38,7 +38,6 @@ $button-md-hover-opacity: 0.8 !default; padding: $button-md-padding; min-height: $button-md-height; - line-height: $button-md-height; font-size: $button-md-font-size; border: 0; diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 14a9b4b43c..c0a5e9b174 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -6,8 +6,8 @@ import {Config} from '../../config/config'; /** * @name Icon * @description - * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, - * check out the [Ionicons resource docs](../../../../../resources/ionicons). + * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, + * check out the [Ionicons resource docs](../../../../../resources/ionicons). * * @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon. * If there is not an outlined version for the particular icon, it will use the default (full) version. @@ -53,7 +53,7 @@ export class Icon { } else if (!this.name) { // looping through native dom attributes, eww - // https://github.com/angular/angular/issues/3961 + // https://github.com/angular/angular/issues/1818 for (let i = 0, l = ele.attributes.length; i < l; i++) { if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) { this.name = ele.attributes[i].name;