Address feedback

angular · Feb 3, 2017 · b48d2a9 · b48d2a9
1 parent 321114b
commit b48d2a9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
@@ -68,16 +68,16 @@
     }
   }
 
-  md-checkbox:not(.md-checkbox-disabled) {
-    &.md-primary .md-checkbox-ripple .md-ripple-element {
+  .md-checkbox:not(.md-checkbox-disabled) {
+    &.md-primary .md-checkbox-ripple .mat-ripple-element {
       background-color: md-color($primary, 0.26);
     }
 
-    &.md-accent .md-checkbox-ripple .md-ripple-element {
+    &.md-accent .md-checkbox-ripple .mat-ripple-element {
       background-color: md-color($accent, 0.26);
     }
 
-    &.md-warn .md-checkbox-ripple .md-ripple-element {
+    &.md-warn .md-checkbox-ripple .mat-ripple-element {
       background-color: md-color($warn, 0.26);
     }
   }

diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss
@@ -1,6 +1,6 @@
 @import '../theming/theming';
 
-$md-ripple-element-color: rgba(0, 0, 0, 0.1);
+$mat-ripple-element-color: rgba(0, 0, 0, 0.1);
 
 
 @mixin md-ripple() {
@@ -14,12 +14,12 @@ $md-ripple-element-color: rgba(0, 0, 0, 0.1);
     overflow: visible;
   }
 
-  .md-ripple-element {
+  .mat-ripple-element {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
 
-    background-color: $md-ripple-element-color;
+    background-color: $mat-ripple-element-color;
 
     transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
     transform: scale(0);

diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts
@@ -84,7 +84,7 @@ export class RippleRenderer {
     let offsetY = pageY - containerRect.top;
 
     let ripple = document.createElement('div');
-    ripple.classList.add('md-ripple-element');
+    ripple.classList.add('mat-ripple-element');
 
     ripple.style.left = `${offsetX - radius}px`;
     ripple.style.top = `${offsetY - radius}px`;
@@ -99,14 +99,12 @@ export class RippleRenderer {
 
     // By default the browser does not recalculate the styles of dynamically created
     // ripple elements. This is critical because then the `scale` would not animate properly.
-    // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
-    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    window.getComputedStyle(ripple).getPropertyValue('opacity');
+    this._enforceStyleRecalculation(ripple);
 
     ripple.style.transform = 'scale(1)';
 
-    // Wait for the ripple to be faded in. Once faded in the ripple can be hided if the mouse is
-    // released.
+    // Wait for the ripple to be faded in. Once it's faded in, the ripple can be hidden immediately
+    // if the mouse is released.
     this.runTimeoutOutsideZone(() => {
       this._isMousedown ? this._activeRipples.push(ripple) : this.fadeOutRipple(ripple);
     }, duration * 1000);
@@ -167,4 +165,13 @@ export class RippleRenderer {
     this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
   }
 
+  /** Enforces a style recalculation of a DOM element by computing its styles. */
+  // TODO(devversion): Move into global utility function.
+  private _enforceStyleRecalculation(element: HTMLElement) {
+    // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
+    // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
+    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    window.getComputedStyle(element).getPropertyValue('opacity');
+  }
+
 }
diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts
@@ -90,37 +90,37 @@ describe('MdRipple', () => {
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
 
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(2);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(2);
     });
 
     it('removes ripple after timeout', fakeAsync(() => {
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
 
       // Determines the diagonal distance of the ripple target.
       let diagonal = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH);
 
       // Calculates the duration for fading in the ripple. Also adds the fade-out duration.
       tick((diagonal / RIPPLE_SPEED_PX_PER_SECOND * 1000) + RIPPLE_FADE_OUT_DURATION);
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     }));
 
     it('creates ripples when manually triggered', () => {
       let rippleComponent = fixture.debugElement.componentInstance.ripple as MdRipple;
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
 
       rippleComponent.launch(0, 0);
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
     });
 
     it('sizes ripple to cover element', () => {
@@ -141,7 +141,7 @@ describe('MdRipple', () => {
       let expectedLeft = elementRect.left + 50 - expectedRadius;
       let expectedTop = elementRect.top + 75 - expectedRadius;
 
-      let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
+      let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
 
       // Note: getBoundingClientRect won't work because there's a transform applied to make the
       // ripple start out tiny.
@@ -164,7 +164,7 @@ describe('MdRipple', () => {
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
 
     describe('when page is scrolled', () => {
@@ -235,7 +235,7 @@ describe('MdRipple', () => {
         let expectedLeft = left - expectedRadius;
         let expectedTop = top - expectedRadius;
 
-        let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
+        let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
 
         // In the iOS simulator (BrowserStack & SauceLabs), adding the content to the
         // body causes karma's iframe for the test to stretch to fit that content once we attempt to
@@ -277,7 +277,7 @@ describe('MdRipple', () => {
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      let ripple = rippleTarget.querySelector('.md-ripple-element');
+      let ripple = rippleTarget.querySelector('.mat-ripple-element');
       expect(window.getComputedStyle(ripple).backgroundColor).toBe(backgroundColor);
     });
 
@@ -288,15 +288,15 @@ describe('MdRipple', () => {
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
 
       controller.disabled = false;
       fixture.detectChanges();
 
       dispatchMouseEvent('mousedown');
       dispatchMouseEvent('mouseup');
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
     });
 
     it('allows specifying custom trigger element', () => {
@@ -309,7 +309,7 @@ describe('MdRipple', () => {
       alternateTrigger.dispatchEvent(mousedownEvent);
       alternateTrigger.dispatchEvent(mouseupEvent);
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
 
       // Set the trigger element, and now events should create ripples.
       controller.trigger = alternateTrigger;
@@ -318,7 +318,7 @@ describe('MdRipple', () => {
       alternateTrigger.dispatchEvent(mousedownEvent);
       alternateTrigger.dispatchEvent(mouseupEvent);
 
-      expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
     });
 
     it('expands ripple from center if centered input is set', () => {
@@ -338,7 +338,7 @@ describe('MdRipple', () => {
       let expectedLeft = elementRect.left + (elementRect.width / 2) - expectedRadius;
       let expectedTop = elementRect.top + (elementRect.height / 2) - expectedRadius;
 
-      let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
+      let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
 
       expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
       expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
@@ -361,7 +361,7 @@ describe('MdRipple', () => {
       let expectedLeft = elementRect.left + 50 - customRadius;
       let expectedTop = elementRect.top + 75 - customRadius;
 
-      let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
+      let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
 
       expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
       expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);

diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
@@ -29,7 +29,7 @@
     }
   }
 
-  .md-radio-ripple .md-ripple-element {
+  .md-radio-ripple .mat-ripple-element {
     background-color: md-color($accent, 0.26);
 
     .md-radio-disabled & {