Skip to content

Commit

Permalink
fix(checkbox): Remove unused methods and cleanup styles
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 463285386
  • Loading branch information
@material-web-copybara @copybara-github
material-web-copybara authored and copybara-github committed Jul 26, 2022
1 parent 4b79baa commit 9152fed
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 121 deletions.
74 changes: 32 additions & 42 deletions checkbox/lib/_checkbox-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,11 @@
// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

// TODO(b/228217731): Remove MDC/MWC dependencies
@use 'sass:map';
@use 'sass:math';
@use 'sass:selector';

@use '@material/web/ripple/ripple-theme';
@use '@material/web/compat/theme/shadow-dom';
@use '@material/web/sass/color';
@use '@material/web/sass/theme';
@use '@material/web/sass/var';
@use '@material/web/tokens';

$custom-property-prefix: 'checkbox';
Expand Down Expand Up @@ -157,23 +152,25 @@ $_theme-extension-keys: (
)
);

@include _checked-selector() {
@include ripple-theme.theme(
(
hover-state-layer-color:
map.get($theme, selected-hover-state-layer-color),
focus-state-layer-color:
map.get($theme, selected-focus-state-layer-color),
pressed-state-layer-color:
map.get($theme, selected-pressed-state-layer-color),
hover-state-layer-opacity:
map.get($theme, selected-hover-state-layer-opacity),
focus-state-layer-opacity:
map.get($theme, selected-focus-state-layer-opacity),
pressed-state-layer-opacity:
map.get($theme, selected-pressed-state-layer-opacity),
)
);
@include _if-selected() {
.md3-checkbox__ripple {
@include ripple-theme.theme(
(
hover-state-layer-color:
map.get($theme, selected-hover-state-layer-color),
focus-state-layer-color:
map.get($theme, selected-focus-state-layer-color),
pressed-state-layer-color:
map.get($theme, selected-pressed-state-layer-color),
hover-state-layer-opacity:
map.get($theme, selected-hover-state-layer-opacity),
focus-state-layer-opacity:
map.get($theme, selected-focus-state-layer-opacity),
pressed-state-layer-opacity:
map.get($theme, selected-pressed-state-layer-opacity),
)
);
}
}
}

Expand Down Expand Up @@ -213,24 +210,26 @@ $_theme-extension-keys: (
}

@mixin _selected-icon-color($color) {
@include _if-selected {
@include _ink-color(map.get($color, default));
// NOTE: Target checkmark when checkbox is selected and unselected so that the
// checkmark will have the same color during checked to uncheck animation.
.md3-checkbox__native-control ~ {
@include _checkmark-color(map.get($color, default));
}

@include _if-selected-hover {
@include _ink-color(map.get($color, hover));
.md3-checkbox__native-control:hover ~ {
@include _checkmark-color(map.get($color, hover));
}

@include _if-selected-focus {
@include _ink-color(map.get($color, focus));
.md3-checkbox__native-control:focus ~ {
@include _checkmark-color(map.get($color, focus));
}

@include _if-selected-pressed {
@include _ink-color(map.get($color, pressed));
.md3-checkbox__native-control:active ~ {
@include _checkmark-color(map.get($color, pressed));
}

@include _if-selected-disabled {
@include _ink-color(map.get($color, disabled));
.md3-checkbox__native-control:disabled ~ {
@include _checkmark-color(map.get($color, disabled));
}
}

Expand Down Expand Up @@ -488,7 +487,7 @@ $_selected-selector: ".md3-checkbox__native-control:checked, .md3-checkbox__nati
}
}

@mixin _ink-color($color) {
@mixin _checkmark-color($color) {
.md3-checkbox__background {
.md3-checkbox__checkmark {
color: $color;
Expand Down Expand Up @@ -531,12 +530,3 @@ $_selected-selector: ".md3-checkbox__native-control:checked, .md3-checkbox__nati
}
}
}

@mixin _checked-selector() {
@include shadow-dom.host-aware(
selector.append(&, '[checked]'),
selector.append(&, '[indeterminate]')
) {
@content;
}
}
62 changes: 16 additions & 46 deletions checkbox/lib/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@use 'sass:math';
@use '@material/web/focus/lib/focus-ring-theme';
@use '@material/web/motion/animation';
@use '@material/web/sass/var';

@use './checkbox-theme';

Expand Down Expand Up @@ -40,16 +39,12 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;

@mixin static-styles() {
@include _mark-keyframes();
@include _animation();

.md3-checkbox {
@include _base();
}

// Needed to disable hover effects on CSS-only (non-JS) checkboxes
.md3-checkbox--disabled {
@include _disabled();
}

.md3-checkbox__background {
@include _background();
}
Expand All @@ -66,10 +61,6 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
@include _mixedmark();
}

.md3-checkbox--anim {
@include _anim();
}

.md3-checkbox__native-control:checked ~ .md3-checkbox__background,
.md3-checkbox__native-control:indeterminate ~ .md3-checkbox__background,
.md3-checkbox__native-control[data-indeterminate='true']
Expand All @@ -83,10 +74,11 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;

.md3-checkbox__native-control {
@include _native-control();
}

&:disabled {
@include _disabled();
}
.md3-checkbox--disabled,
.md3-checkbox__native-control:disabled {
@include _disabled();
}

.md3-checkbox__native-control:checked ~ .md3-checkbox__background {
Expand All @@ -110,16 +102,6 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
}
}

// JS checkbox
.md3-checkbox.md3-checkbox--upgraded {
.md3-checkbox__background,
.md3-checkbox__checkmark,
.md3-checkbox__checkmark-path,
.md3-checkbox__mixedmark {
@include _child--upgraded();
}
}

.md3-checkbox__ripple {
position: absolute;
display: inline-flex;
Expand Down Expand Up @@ -153,19 +135,13 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
pointer-events: none;
}

@mixin _child--upgraded() {
transition: none;
}

// Animation

@mixin _anim() {
@mixin _animation() {
$md3-checkbox-indeterminate-change-duration_: 500ms;

&-unchecked-checked,
&-unchecked-indeterminate,
&-checked-unchecked,
&-indeterminate-unchecked {
.md3-checkbox--anim-unchecked-checked,
.md3-checkbox--anim-unchecked-indeterminate,
.md3-checkbox--anim-checked-unchecked,
.md3-checkbox--anim-indeterminate-unchecked {
.md3-checkbox__background {
animation-duration: $_transition-duration * 2;
animation-timing-function: linear;
Expand All @@ -174,7 +150,7 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;

// stylelint-disable no-unknown-animations -- Asterisk is treated as
// animation name. Supress the lint warning.
&-unchecked-checked {
.md3-checkbox--anim-unchecked-checked {
.md3-checkbox__checkmark-path {
// Instead of delaying the animation, we simply multiply its length by 2 and begin the
// animation at 50% in order to prevent a flash of styles applied to a checked checkmark
Expand All @@ -185,23 +161,23 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
}
}

&-unchecked-indeterminate {
.md3-checkbox--anim-unchecked-indeterminate {
.md3-checkbox__mixedmark {
animation: md3-checkbox-unchecked-indeterminate-mixedmark
$_transition-duration linear 0s;
transition: none;
}
}

&-checked-unchecked {
.md3-checkbox--anim-checked-unchecked {
.md3-checkbox__checkmark-path {
animation: md3-checkbox-checked-unchecked-checkmark-path
$_transition-duration linear 0s;
transition: none;
}
}

&-checked-indeterminate {
.md3-checkbox--anim-checked-indeterminate {
.md3-checkbox__checkmark {
animation: md3-checkbox-checked-indeterminate-checkmark
$_transition-duration linear 0s;
Expand All @@ -215,7 +191,7 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
}
}

&-indeterminate-checked {
.md3-checkbox--anim-indeterminate-checked {
.md3-checkbox__checkmark {
animation: md3-checkbox-indeterminate-checked-checkmark
$md3-checkbox-indeterminate-change-duration_ linear 0s;
Expand All @@ -229,7 +205,7 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
}
}

&-indeterminate-unchecked {
.md3-checkbox--anim-indeterminate-unchecked {
.md3-checkbox__mixedmark {
animation: md3-checkbox-indeterminate-unchecked-mixedmark
$md3-checkbox-indeterminate-change-duration_ * 0.6 linear 0s;
Expand Down Expand Up @@ -274,14 +250,8 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
inset: 0;
box-sizing: border-box;
width: 100%;
opacity: 0;
border: none;

transition: transition-exit(opacity, 0ms, $_transition-duration * 2);

.md3-checkbox--upgraded & {
opacity: 1;
}
}

@mixin _checkmark--checked() {
Expand Down
40 changes: 7 additions & 33 deletions checkbox/lib/checkbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,10 @@ export class Checkbox extends ActionElement {

@state() protected animationClass = '';

@state() protected shouldRenderRipple = false;

@state() protected showFocusRing = false;

@state() protected focused = false;

@query('md-ripple') ripple!: MdRipple;

// MDC Foundation is unused
protected mdcFoundationClass = undefined;

protected mdcFoundation = undefined;

protected createAdapter() {
return {};
}

protected override update(changedProperties: PropertyValues) {
const oldIndeterminate = changedProperties.get('indeterminate');
const oldChecked = changedProperties.get('checked');
Expand Down Expand Up @@ -119,34 +106,27 @@ export class Checkbox extends ActionElement {
* @soyClasses checkboxClasses: .md3-checkbox
*/
protected override render(): TemplateResult {
const selected = this.indeterminate || this.checked;
/* eslint-disable eqeqeq */
// tslint:disable:triple-equals
/** @classMap */
const classes = {
'md3-checkbox--disabled': this.disabled,
'md3-checkbox--selected': selected,
'md3-checkbox--touch': !this.reducedTouchTarget,
'md3-ripple-upgraded--background-focused': this.focused,
// transition animiation classes
'md3-checkbox--anim-checked-indeterminate':
this.animationClass == 'checked-indeterminate',
this.animationClass === 'checked-indeterminate',
'md3-checkbox--anim-checked-unchecked':
this.animationClass == 'checked-unchecked',
this.animationClass === 'checked-unchecked',
'md3-checkbox--anim-indeterminate-checked':
this.animationClass == 'indeterminate-checked',
this.animationClass === 'indeterminate-checked',
'md3-checkbox--anim-indeterminate-unchecked':
this.animationClass == 'indeterminate-unchecked',
this.animationClass === 'indeterminate-unchecked',
'md3-checkbox--anim-unchecked-checked':
this.animationClass == 'unchecked-checked',
this.animationClass === 'unchecked-checked',
'md3-checkbox--anim-unchecked-indeterminate':
this.animationClass == 'unchecked-indeterminate',
this.animationClass === 'unchecked-indeterminate',
};
// tslint:enable:triple-equals
/* eslint-enable eqeqeq */
const ariaChecked = this.indeterminate ? 'mixed' : undefined;
return html`
<div class="md3-checkbox md3-checkbox--upgraded ${classMap(classes)}">
<div class="md3-checkbox ${classMap(classes)}">
${this.renderFocusRing()}
<input type="checkbox"
class="md3-checkbox__native-control"
Expand Down Expand Up @@ -212,12 +192,10 @@ export class Checkbox extends ActionElement {
}

protected handleFocus() {
this.focused = true;
this.showFocusRing = shouldShowStrongFocus();
}

protected handleBlur() {
this.focused = false;
this.showFocusRing = false;
}

Expand Down Expand Up @@ -250,8 +228,4 @@ export class Checkbox extends ActionElement {
protected resetAnimationClass() {
this.animationClass = '';
}

get isRippleActive() {
return false;
}
}

0 comments on commit 9152fed

Please sign in to comment.