From e45a0a91f2211a48b034f17ccff1c10d51435b9a Mon Sep 17 00:00:00 2001 From: bakgat Date: Wed, 17 Feb 2016 20:59:40 +0100 Subject: [PATCH] fix(#75): fix md-button attaches class "md-undefined" to host element when on color provided fix(#75): fix md-button attaches class "md-undefined" to host element fix(#75): correct indent fix(#75): constructor in MdAnchor fix(#75): fix incorrectly extending base class fix(#75): fix Only static members can be accessed in initializers fix(#75): still learning :/ fix 'this' cannot be referenced in current location fix(#75): remove the previous color if one provided fix(#75): fixed messing up the inputs fix(#75): if value undefined, don't set element class fix(#75): removed unused testComponent fix(#75): replaced undefined with null because of dart --- src/components/button/button.spec.ts | 30 ++++++++++++++++++ src/components/button/button.ts | 47 +++++++++++++++++++++++----- src/demo-app/button/button-demo.html | 2 +- 3 files changed, 70 insertions(+), 9 deletions(-) diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts index f9c22f4b65b9..3c64cd5b7a99 100644 --- a/src/components/button/button.spec.ts +++ b/src/components/button/button.spec.ts @@ -46,6 +46,36 @@ export function main() { done(); }); }); + it('should append class based on color attribute to an existing class list', (done: () => void) => { + return builder.createAsync(TestApp).then((fixture) => { + let testComponent = fixture.debugElement.componentInstance; + let buttonDebugElement = fixture.debugElement.query(By.css('button')); + let aDebugElement = fixture.debugElement.query(By.css('a')); + + //button color should append to an existing class list + testComponent.buttonColor = 'warn'; + buttonDebugElement.nativeElement.classList.add('foo'); + aDebugElement.nativeElement.classList.add('foo'); + fixture.detectChanges(); + expect(buttonDebugElement.nativeElement.classList.contains('md-warn')).toBe(true); + expect(buttonDebugElement.nativeElement.classList.contains('foo')).toBe(true); + expect(aDebugElement.nativeElement.classList.contains('md-warn')).toBe(true); + expect(aDebugElement.nativeElement.classList.contains('foo')).toBe(true); + done(); + }); + }); + it('should not render a class attribute when no color attribute is provided', (done: () => void) => { + //covering fix #75 + return builder.createAsync(TestApp).then((fixture) => { + let buttonDebugElement = fixture.debugElement.query(By.css('button')); + let aDebugElement = fixture.debugElement.query(By.css('a')); + + fixture.detectChanges(); + expect(buttonDebugElement.nativeElement.hasAttribute('class')).toBe(false); + expect(aDebugElement.nativeElement.hasAttribute('class')).toBe(false); + done(); + }); + }); // Regular button tests describe('button[md-button]', () => { diff --git a/src/components/button/button.ts b/src/components/button/button.ts index efd1f241f800..3f870a1b25c2 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,11 +1,14 @@ import { Component, + ElementRef, ViewEncapsulation, Input, HostBinding, HostListener, ChangeDetectionStrategy, + Renderer, } from 'angular2/core'; + import {TimerWrapper} from 'angular2/src/facade/async'; // TODO(jelbourn): Ink ripples. @@ -18,7 +21,6 @@ import {TimerWrapper} from 'angular2/src/facade/async'; inputs: ['color'], host: { '[class.md-button-focus]': 'isKeyboardFocused', - '[class]': 'setClassList()', '(mousedown)': 'setMousedown()', '(focus)': 'setKeyboardFocus()', '(blur)': 'removeKeyboardFocus()' @@ -29,7 +31,31 @@ import {TimerWrapper} from 'angular2/src/facade/async'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdButton { - color: string; + private color_: string; + + // Setting the class when a color property is provided + // cannot be done through [ngClass] on host or [class] = 'getClassList()' + // @see http://stackoverflow.com/questions/35506395 + @Input() + set color(value: string) { + // Remove the previous color if one provided + if (this.color_ != null) { + this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, false); + } + + this.color_ = value; + + if (value != null) { + this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true); + } + } + + get color(): string { + return this.color_; + } + + constructor(public elementRef: ElementRef, public renderer: Renderer) { + } /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */ isKeyboardFocused: boolean = false; @@ -37,15 +63,15 @@ export class MdButton { /** Whether a mousedown has occurred on this element in the last 100ms. */ isMouseDown: boolean = false; - setClassList() {return `md-${this.color}`;} - setMousedown() { // We only *show* the focus style when focus has come to the button via the keyboard. // The Material Design spec is silent on this topic, and without doing this, the // button continues to look :active after clicking. // @see http://marcysutton.com/button-focus-hell/ this.isMouseDown = true; - TimerWrapper.setTimeout(() => { this.isMouseDown = false; }, 100); + TimerWrapper.setTimeout(() => { + this.isMouseDown = false; + }, 100); } setKeyboardFocus($event: any) { @@ -62,7 +88,6 @@ export class MdButton { inputs: ['color'], host: { '[class.md-button-focus]': 'isKeyboardFocused', - '[class]': 'setClassList()', '(mousedown)': 'setMousedown()', '(focus)': 'setKeyboardFocus()', '(blur)': 'removeKeyboardFocus()' @@ -74,8 +99,12 @@ export class MdButton { export class MdAnchor extends MdButton { disabled_: boolean = null; + constructor(elementRef_: ElementRef, renderer_: Renderer) { + super(elementRef_, renderer_); + } + @HostBinding('tabIndex') - get tabIndex():number { + get tabIndex(): number { return this.disabled ? -1 : 0; } @@ -87,7 +116,9 @@ export class MdAnchor extends MdButton { @HostBinding('attr.disabled') @Input('disabled') - get disabled() { return this.disabled_; } + get disabled() { + return this.disabled_; + } set disabled(value: boolean) { // The presence of *any* disabled value makes the component disabled, *except* for false. diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html index befde24849f2..5c69b38c4719 100644 --- a/src/demo-app/button/button-demo.html +++ b/src/demo-app/button/button-demo.html @@ -21,7 +21,7 @@
- +