Skip to content

Commit c1bf2a0

Browse files
crisbetocrisbeto
committed
feat(checkbox): align with 2018 material design spec
Aligns the checkbox component with the latest Material design spec.
1 parent 1e1751f commit c1bf2a0

File tree

10 files changed

+82
-90
lines changed

10 files changed

+82
-90
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
}
6161

6262
.mat-checkbox-disabled {
63-
&.mat-checkbox-checked, &.mat-checkbox-indeterminate {
63+
&.mat-checkbox-checked:not(.mat-checkbox-indeterminate) {
6464
.mat-checkbox-background {
6565
background-color: $disabled-color;
6666
}
@@ -92,15 +92,15 @@
9292

9393
.mat-checkbox:not(.mat-checkbox-disabled) {
9494
&.mat-primary .mat-checkbox-ripple .mat-ripple-element {
95-
background-color: mat-color($primary, 0.26);
95+
background-color: mat-color($primary);
9696
}
9797

9898
&.mat-accent .mat-checkbox-ripple .mat-ripple-element {
99-
background-color: mat-color($accent, 0.26);
99+
background-color: mat-color($accent);
100100
}
101101

102102
&.mat-warn .mat-checkbox-ripple .mat-ripple-element {
103-
background-color: mat-color($warn, 0.26);
103+
background-color: mat-color($warn);
104104
}
105105
}
106106
}

‎src/lib/checkbox/checkbox.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@
1919
<div matRipple class="mat-checkbox-ripple"
2020
[matRippleTrigger]="label"
2121
[matRippleDisabled]="_isRippleDisabled()"
22-
[matRippleRadius]="25"
22+
[matRippleRadius]="20"
2323
[matRippleCentered]="true"
2424
[matRippleAnimation]="{enterDuration: 150}">
25+
<div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
2526
</div>
2627
<div class="mat-checkbox-frame"></div>
2728
<div class="mat-checkbox-background">

‎src/lib/checkbox/checkbox.scss

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $_mat-checkbox-mark-path-length: 22.910259;
1111
$_mat-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
1212

1313
// The ripple size of the checkbox
14-
$_mat-checkbox-ripple-radius: 25px;
14+
$_mat-checkbox-ripple-radius: 20px;
1515

1616
// The amount of spacing between the checkbox and its label.
1717
$_mat-checkbox-item-spacing: $mat-toggle-padding;
@@ -164,13 +164,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
164164
}
165165
}
166166

167-
// Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
168-
// the mixedmark.
169-
%mat-checkbox-mark {
170-
$width-padding-inset: 2 * $mat-checkbox-border-width;
171-
width: calc(100% - #{$width-padding-inset});
172-
}
173-
174167
// Applied to elements that appear to make up the outer box of the checkmark, such as the frame
175168
// that contains the border and the actual background element that contains the marks.
176169
%mat-checkbox-outer-box {
@@ -189,6 +182,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
189182

190183
cursor: pointer;
191184
-webkit-tap-highlight-color: transparent;
185+
186+
.mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
187+
opacity: 0.16;
188+
}
192189
}
193190

194191
.mat-checkbox-layout {
@@ -260,10 +257,29 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
260257
}
261258
}
262259

260+
.mat-checkbox-persistent-ripple {
261+
width: 100%;
262+
height: 100%;
263+
transform: none;
264+
265+
.mat-checkbox-inner-container:hover & {
266+
opacity: 0.04;
267+
}
268+
269+
.mat-checkbox.cdk-focused & {
270+
opacity: 0.12;
271+
}
272+
273+
// We do this here, rather than having a `:not(.mat-checkbox-disabled)`
274+
// above in the `:hover`, because the `:not` will bump the specificity
275+
// a lot and will cause it to overide the focus styles.
276+
&, .mat-checkbox.mat-disabled .mat-checkbox-inner-container:hover & {
277+
opacity: 0;
278+
}
279+
}
280+
263281
.mat-checkbox-checkmark {
264282
@include mat-fill;
265-
@extend %mat-checkbox-mark;
266-
267283
width: 100%;
268284
}
269285

@@ -278,10 +294,11 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
278294
.mat-checkbox-mixedmark {
279295
$height: floor($_mat-checkbox-mark-stroke-size);
280296

281-
@extend %mat-checkbox-mark;
297+
width: calc(100% - 6px);
282298
height: $height;
283299
opacity: 0;
284300
transform: scaleX(0) rotate(0deg);
301+
border-radius: 2px;
285302

286303
@include cdk-high-contrast {
287304
height: 0;
@@ -335,6 +352,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
335352
opacity: 1;
336353
transform: scaleX(1) rotate(0deg);
337354
}
355+
356+
&.mat-checkbox-disabled {
357+
.mat-checkbox-inner-container {
358+
opacity: 0.5;
359+
}
360+
}
338361
}
339362

340363

‎src/lib/checkbox/checkbox.spec.ts

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
ComponentFixture,
33
fakeAsync,
44
TestBed,
5-
tick,
65
flush,
76
flushMicrotasks,
87
} from '@angular/core/testing';
@@ -11,7 +10,6 @@ import {Component, DebugElement, ViewChild, Type} from '@angular/core';
1110
import {By} from '@angular/platform-browser';
1211
import {dispatchFakeEvent} from '@angular/cdk/testing';
1312
import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
14-
import {defaultRippleAnimationConfig} from '@angular/material/core';
1513
import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config';
1614
import {MutationObserverFactory} from '@angular/cdk/observers';
1715

@@ -379,74 +377,59 @@ describe('MatCheckbox', () => {
379377
expect(inputElement.value).toBe('basic_checkbox');
380378
});
381379

382-
it('should show a ripple when focused by a keyboard action', fakeAsync(() => {
383-
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
384-
.toBe(0, 'Expected no ripples on load.');
385-
386-
dispatchFakeEvent(inputElement, 'keydown');
387-
dispatchFakeEvent(inputElement, 'focus');
388-
389-
tick(defaultRippleAnimationConfig.enterDuration);
390-
391-
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
392-
.toBe(1, 'Expected ripple after element is focused.');
393-
394-
dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
395-
tick(defaultRippleAnimationConfig.exitDuration);
396-
397-
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
398-
.toBe(0, 'Expected no ripple after element is blurred.');
399-
}));
400-
401380
it('should remove the SVG checkmark from the tab order', () => {
402381
expect(checkboxNativeElement.querySelector('svg')!.getAttribute('focusable')).toBe('false');
403382
});
404383

405384
describe('ripple elements', () => {
406385

407386
it('should show ripples on label mousedown', () => {
408-
expect(checkboxNativeElement.querySelector('.mat-ripple-element')).toBeFalsy();
387+
const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
388+
389+
expect(checkboxNativeElement.querySelector(rippleSelector)).toBeFalsy();
409390

410391
dispatchFakeEvent(labelElement, 'mousedown');
411392
dispatchFakeEvent(labelElement, 'mouseup');
412393

413-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
394+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
414395
});
415396

416397
it('should not show ripples when disabled', () => {
398+
const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
417399
testComponent.isDisabled = true;
418400
fixture.detectChanges();
419401

420402
dispatchFakeEvent(labelElement, 'mousedown');
421403
dispatchFakeEvent(labelElement, 'mouseup');
422404

423-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
405+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
424406

425407
testComponent.isDisabled = false;
426408
fixture.detectChanges();
427409

428410
dispatchFakeEvent(labelElement, 'mousedown');
429411
dispatchFakeEvent(labelElement, 'mouseup');
430412

431-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
413+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
432414
});
433415

434416
it('should remove ripple if matRippleDisabled input is set', () => {
417+
const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
435418
testComponent.disableRipple = true;
436419
fixture.detectChanges();
437420

438421
dispatchFakeEvent(labelElement, 'mousedown');
439422
dispatchFakeEvent(labelElement, 'mouseup');
440423

441-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
424+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
442425

443426
testComponent.disableRipple = false;
444427
fixture.detectChanges();
445428

446429
dispatchFakeEvent(labelElement, 'mousedown');
447430
dispatchFakeEvent(labelElement, 'mouseup');
448431

449-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
432+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
450433
});
451434
});
452435

@@ -842,19 +825,20 @@ describe('MatCheckbox', () => {
842825
});
843826

844827
it('should toggle checkbox ripple disabledness correctly', () => {
828+
const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
845829
const labelElement = checkboxNativeElement.querySelector('label') as HTMLLabelElement;
846830

847831
testComponent.isDisabled = true;
848832
fixture.detectChanges();
849833
dispatchFakeEvent(labelElement, 'mousedown');
850834
dispatchFakeEvent(labelElement, 'mouseup');
851-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
835+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
852836

853837
testComponent.isDisabled = false;
854838
fixture.detectChanges();
855839
dispatchFakeEvent(labelElement, 'mousedown');
856840
dispatchFakeEvent(labelElement, 'mouseup');
857-
expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
841+
expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
858842
});
859843
});
860844

‎src/lib/checkbox/checkbox.ts

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
9+
import {FocusMonitor} from '@angular/cdk/a11y';
1010
import {coerceBooleanProperty} from '@angular/cdk/coercion';
1111
import {
12-
AfterViewInit,
1312
Attribute,
1413
ChangeDetectionStrategy,
1514
ChangeDetectorRef,
@@ -32,12 +31,11 @@ import {
3231
CanDisable,
3332
CanDisableRipple,
3433
HasTabIndex,
35-
MatRipple,
3634
mixinColor,
3735
mixinDisabled,
3836
mixinDisableRipple,
3937
mixinTabIndex,
40-
RippleRef,
38+
MatRipple,
4139
} from '@angular/material/core';
4240
import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';
4341
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -118,7 +116,7 @@ export const _MatCheckboxMixinBase =
118116
changeDetection: ChangeDetectionStrategy.OnPush
119117
})
120118
export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
121-
AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
119+
OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
122120

123121
/**
124122
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
@@ -179,9 +177,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
179177

180178
private _controlValueAccessorChangeFn: (value: any) => void = () => {};
181179

182-
/** Reference to the focused state ripple. */
183-
private _focusRipple: RippleRef | null;
184-
185180
constructor(elementRef: ElementRef,
186181
private _changeDetectorRef: ChangeDetectorRef,
187182
private _focusMonitor: FocusMonitor,
@@ -193,16 +188,21 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
193188
super(elementRef);
194189

195190
this.tabIndex = parseInt(tabIndex) || 0;
196-
}
197191

198-
ngAfterViewInit() {
199-
this._focusMonitor
200-
.monitor(this._inputElement.nativeElement)
201-
.subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
192+
this._focusMonitor.monitor(elementRef.nativeElement, true).subscribe(focusOrigin => {
193+
if (!focusOrigin) {
194+
// When a focused element becomes disabled, the browser *immediately* fires a blur event.
195+
// Angular does not expect events to be raised during change detection, so any state change
196+
// (such as a form control's 'ng-touched') will cause a changed-after-checked error.
197+
// See https://github.com/angular/angular/issues/17793. To work around this, we defer
198+
// telling the form control it has been touched until the next tick.
199+
Promise.resolve().then(() => this._onTouched());
200+
}
201+
});
202202
}
203203

204204
ngOnDestroy() {
205-
this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
205+
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
206206
}
207207

208208
/**
@@ -322,34 +322,14 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
322322
}
323323

324324
private _emitChangeEvent() {
325-
let event = new MatCheckboxChange();
325+
const event = new MatCheckboxChange();
326326
event.source = this;
327327
event.checked = this.checked;
328328

329329
this._controlValueAccessorChangeFn(this.checked);
330330
this.change.emit(event);
331331
}
332332

333-
/** Function is called whenever the focus changes for the input element. */
334-
private _onInputFocusChange(focusOrigin: FocusOrigin) {
335-
// TODO(paul): support `program`. See https://github.com/angular/material2/issues/9889
336-
if (!this._focusRipple && focusOrigin === 'keyboard') {
337-
this._focusRipple = this.ripple.launch(0, 0, {persistent: true});
338-
} else if (!focusOrigin) {
339-
if (this._focusRipple) {
340-
this._focusRipple.fadeOut();
341-
this._focusRipple = null;
342-
}
343-
344-
// When a focused element becomes disabled, the browser *immediately* fires a blur event.
345-
// Angular does not expect events to be raised during change detection, so any state change
346-
// (such as a form control's 'ng-touched') will cause a changed-after-checked error.
347-
// See https://github.com/angular/angular/issues/17793. To work around this, we defer telling
348-
// the form control it has been touched until the next tick.
349-
Promise.resolve().then(() => this._onTouched());
350-
}
351-
}
352-
353333
/** Toggles the `checked` state of the checkbox. */
354334
toggle(): void {
355335
this.checked = !this.checked;

‎src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@
4343
background: mat-color(map-get($theme, warn));
4444
}
4545

46-
.mat-pseudo-checkbox-checked,
47-
.mat-pseudo-checkbox-indeterminate {
46+
.mat-pseudo-checkbox-checked {
4847
&.mat-pseudo-checkbox-disabled {
4948
background: $disabled-color;
5049
}

‎src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,18 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
4545

4646
.mat-pseudo-checkbox-disabled {
4747
cursor: default;
48+
49+
&.mat-pseudo-checkbox-indeterminate {
50+
opacity: 0.5;
51+
}
4852
}
4953

5054
.mat-pseudo-checkbox-indeterminate::after {
5155
top: ($mat-checkbox-size - $mat-checkbox-border-width) / 2 - $mat-checkbox-border-width;
52-
left: 0;
53-
width: $mat-checkbox-size - ($mat-checkbox-border-width * 2);
56+
left: $mat-checkbox-border-width / 2;
57+
width: $mat-checkbox-size - 6px;
5458
opacity: 1;
59+
border-radius: 2px;
5560
}
5661

5762
.mat-pseudo-checkbox-checked::after {

0 commit comments

Comments
 (0)