Skip to content

Commit b48d2a9

Browse files
devversiondevversion
committed
Address feedback
1 parent 321114b commit b48d2a9

File tree

5 files changed

+37
-30
lines changed

5 files changed

+37
-30
lines changed

‎src/lib/checkbox/_checkbox-theme.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,16 @@
6868
}
6969
}
7070

71-
md-checkbox:not(.md-checkbox-disabled) {
72-
&.md-primary .md-checkbox-ripple .md-ripple-element {
71+
.md-checkbox:not(.md-checkbox-disabled) {
72+
&.md-primary .md-checkbox-ripple .mat-ripple-element {
7373
background-color: md-color($primary, 0.26);
7474
}
7575

76-
&.md-accent .md-checkbox-ripple .md-ripple-element {
76+
&.md-accent .md-checkbox-ripple .mat-ripple-element {
7777
background-color: md-color($accent, 0.26);
7878
}
7979

80-
&.md-warn .md-checkbox-ripple .md-ripple-element {
80+
&.md-warn .md-checkbox-ripple .mat-ripple-element {
8181
background-color: md-color($warn, 0.26);
8282
}
8383
}

‎src/lib/core/ripple/_ripple.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../theming/theming';
22

3-
$md-ripple-element-color: rgba(0, 0, 0, 0.1);
3+
$mat-ripple-element-color: rgba(0, 0, 0, 0.1);
44

55

66
@mixin md-ripple() {
@@ -14,12 +14,12 @@ $md-ripple-element-color: rgba(0, 0, 0, 0.1);
1414
overflow: visible;
1515
}
1616

17-
.md-ripple-element {
17+
.mat-ripple-element {
1818
position: absolute;
1919
border-radius: 50%;
2020
pointer-events: none;
2121

22-
background-color: $md-ripple-element-color;
22+
background-color: $mat-ripple-element-color;
2323

2424
transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
2525
transform: scale(0);

‎src/lib/core/ripple/ripple-renderer.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export class RippleRenderer {
8484
let offsetY = pageY - containerRect.top;
8585

8686
let ripple = document.createElement('div');
87-
ripple.classList.add('md-ripple-element');
87+
ripple.classList.add('mat-ripple-element');
8888

8989
ripple.style.left = `${offsetX - radius}px`;
9090
ripple.style.top = `${offsetY - radius}px`;
@@ -99,14 +99,12 @@ export class RippleRenderer {
9999

100100
// By default the browser does not recalculate the styles of dynamically created
101101
// ripple elements. This is critical because then the `scale` would not animate properly.
102-
// Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
103-
// See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
104-
window.getComputedStyle(ripple).getPropertyValue('opacity');
102+
this._enforceStyleRecalculation(ripple);
105103

106104
ripple.style.transform = 'scale(1)';
107105

108-
// Wait for the ripple to be faded in. Once faded in the ripple can be hided if the mouse is
109-
// released.
106+
// Wait for the ripple to be faded in. Once it's faded in, the ripple can be hidden immediately
107+
// if the mouse is released.
110108
this.runTimeoutOutsideZone(() => {
111109
this._isMousedown ? this._activeRipples.push(ripple) : this.fadeOutRipple(ripple);
112110
}, duration * 1000);
@@ -167,4 +165,13 @@ export class RippleRenderer {
167165
this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
168166
}
169167

168+
/** Enforces a style recalculation of a DOM element by computing its styles. */
169+
// TODO(devversion): Move into global utility function.
170+
private _enforceStyleRecalculation(element: HTMLElement) {
171+
// Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
172+
// Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
173+
// See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
174+
window.getComputedStyle(element).getPropertyValue('opacity');
175+
}
176+
170177
}

‎src/lib/core/ripple/ripple.spec.ts

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -90,37 +90,37 @@ describe('MdRipple', () => {
9090
dispatchMouseEvent('mousedown');
9191
dispatchMouseEvent('mouseup');
9292

93-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
93+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
9494

9595
dispatchMouseEvent('mousedown');
9696
dispatchMouseEvent('mouseup');
9797

98-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(2);
98+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(2);
9999
});
100100

101101
it('removes ripple after timeout', fakeAsync(() => {
102102
dispatchMouseEvent('mousedown');
103103
dispatchMouseEvent('mouseup');
104104

105-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
105+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
106106

107107
// Determines the diagonal distance of the ripple target.
108108
let diagonal = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH);
109109

110110
// Calculates the duration for fading in the ripple. Also adds the fade-out duration.
111111
tick((diagonal / RIPPLE_SPEED_PX_PER_SECOND * 1000) + RIPPLE_FADE_OUT_DURATION);
112112

113-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
113+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
114114
}));
115115

116116
it('creates ripples when manually triggered', () => {
117117
let rippleComponent = fixture.debugElement.componentInstance.ripple as MdRipple;
118118

119-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
119+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
120120

121121
rippleComponent.launch(0, 0);
122122

123-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
123+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
124124
});
125125

126126
it('sizes ripple to cover element', () => {
@@ -141,7 +141,7 @@ describe('MdRipple', () => {
141141
let expectedLeft = elementRect.left + 50 - expectedRadius;
142142
let expectedTop = elementRect.top + 75 - expectedRadius;
143143

144-
let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
144+
let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
145145

146146
// Note: getBoundingClientRect won't work because there's a transform applied to make the
147147
// ripple start out tiny.
@@ -164,7 +164,7 @@ describe('MdRipple', () => {
164164
dispatchMouseEvent('mousedown');
165165
dispatchMouseEvent('mouseup');
166166

167-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
167+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
168168
});
169169

170170
describe('when page is scrolled', () => {
@@ -235,7 +235,7 @@ describe('MdRipple', () => {
235235
let expectedLeft = left - expectedRadius;
236236
let expectedTop = top - expectedRadius;
237237

238-
let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
238+
let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
239239

240240
// In the iOS simulator (BrowserStack & SauceLabs), adding the content to the
241241
// body causes karma's iframe for the test to stretch to fit that content once we attempt to
@@ -277,7 +277,7 @@ describe('MdRipple', () => {
277277
dispatchMouseEvent('mousedown');
278278
dispatchMouseEvent('mouseup');
279279

280-
let ripple = rippleTarget.querySelector('.md-ripple-element');
280+
let ripple = rippleTarget.querySelector('.mat-ripple-element');
281281
expect(window.getComputedStyle(ripple).backgroundColor).toBe(backgroundColor);
282282
});
283283

@@ -288,15 +288,15 @@ describe('MdRipple', () => {
288288
dispatchMouseEvent('mousedown');
289289
dispatchMouseEvent('mouseup');
290290

291-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
291+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
292292

293293
controller.disabled = false;
294294
fixture.detectChanges();
295295

296296
dispatchMouseEvent('mousedown');
297297
dispatchMouseEvent('mouseup');
298298

299-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
299+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
300300
});
301301

302302
it('allows specifying custom trigger element', () => {
@@ -309,7 +309,7 @@ describe('MdRipple', () => {
309309
alternateTrigger.dispatchEvent(mousedownEvent);
310310
alternateTrigger.dispatchEvent(mouseupEvent);
311311

312-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
312+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
313313

314314
// Set the trigger element, and now events should create ripples.
315315
controller.trigger = alternateTrigger;
@@ -318,7 +318,7 @@ describe('MdRipple', () => {
318318
alternateTrigger.dispatchEvent(mousedownEvent);
319319
alternateTrigger.dispatchEvent(mouseupEvent);
320320

321-
expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
321+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
322322
});
323323

324324
it('expands ripple from center if centered input is set', () => {
@@ -338,7 +338,7 @@ describe('MdRipple', () => {
338338
let expectedLeft = elementRect.left + (elementRect.width / 2) - expectedRadius;
339339
let expectedTop = elementRect.top + (elementRect.height / 2) - expectedRadius;
340340

341-
let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
341+
let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
342342

343343
expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
344344
expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
@@ -361,7 +361,7 @@ describe('MdRipple', () => {
361361
let expectedLeft = elementRect.left + 50 - customRadius;
362362
let expectedTop = elementRect.top + 75 - customRadius;
363363

364-
let ripple = rippleTarget.querySelector('.md-ripple-element') as HTMLElement;
364+
let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
365365

366366
expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
367367
expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);

‎src/lib/radio/_radio-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
}
3030
}
3131

32-
.md-radio-ripple .md-ripple-element {
32+
.md-radio-ripple .mat-ripple-element {
3333
background-color: md-color($accent, 0.26);
3434

3535
.md-radio-disabled & {

0 commit comments

Comments
 (0)