Skip to content

chore: use computed radius size for checkbox ripple during 2018 material spec update transition #13038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 11, 2018
Merged

chore: use computed radius size for checkbox ripple during 2018 material spec update transition #13038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
left: calc(50% - #{$_mat-checkbox-ripple-radius});
top: calc(50% - #{$_mat-checkbox-ripple-radius});
height: $_mat-checkbox-ripple-radius * 2;
width: $_mat_checkbox-ripple-radius * 2;
width: $_mat-checkbox-ripple-radius * 2;
z-index: 1;
pointer-events: none;
}
28 changes: 27 additions & 1 deletion src/lib/checkbox/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {
AfterViewChecked,
AfterViewInit,
Attribute,
ChangeDetectionStrategy,
Expand Down Expand Up @@ -50,6 +51,11 @@ import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-conf
// Increasing integer for generating unique ids for checkbox components.
let nextUniqueId = 0;

// TODO(josephperrott): Revert to constants for ripple radius once 2018 Checkbox updates have
// landed.
// The radius for the checkbox's ripple, in pixels.
let calculatedRippleRadius = 0;

/**
* Provider Expression that allows mat-checkbox to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
Expand Down Expand Up @@ -127,7 +133,8 @@ export const _MatCheckboxMixinBase:
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
AfterViewChecked, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex,
CanDisableRipple {

/**
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
Expand Down Expand Up @@ -210,6 +217,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
.subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
}

ngAfterViewChecked() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is actually one lint error because AfterViewChecked interface isn't applied. Feel free to add merge ready when done.

this._calculateRippleRadius();
}

ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._inputElement);
}
Expand Down Expand Up @@ -457,4 +468,19 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc

return `mat-checkbox-anim-${animSuffix}`;
}

// TODO(josephperrott): Revert to constants for ripple radius once 2018 Checkbox updates have
// landed.
/**
* Calculate the radius for the ripple based on the ripple elements width. Only calculated once
* for the application.
*/
private _calculateRippleRadius() {
if (!calculatedRippleRadius) {
const rippleWidth =
this._elementRef.nativeElement.querySelector('.mat-checkbox-ripple').clientWidth || 0;
calculatedRippleRadius = rippleWidth / 2;
}
this.ripple.radius = calculatedRippleRadius;
}
}