From d29fb66a8719e2edeeb0379effc8db360bf6c263 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 31 Jul 2017 21:15:36 +0300 Subject: [PATCH] fix(pseudo-checkbox): simplify theming (#6082) Currently the pseudo checkbox both inherits its colors via CSS and has a `color` input. This means that if we wanted to the keep it in sync with its parent component (e.g. a multi-select), we'd have to add some boilerplate that listens to changes, goes through and updates all of the checkboxes, and triggers change detection while avoiding the "changed after check" assertions. Since the component is meant to be really lean and to inherit its colors from the parent, these changes remove the `color` input altogether in order to reduce the complexity and be clearer regarding the intended usage. Since the same is true for the `md-option` component, I've removed the `md-options.{{ palette }}` selectors as well. Fixes #6079. --- src/lib/core/option/_option-theme.scss | 6 +-- src/lib/core/option/option.html | 4 +- .../_pseudo-checkbox-theme.scss | 37 +++++++++++-------- .../pseudo-checkbox/pseudo-checkbox.ts | 28 ++------------ 4 files changed, 30 insertions(+), 45 deletions(-) diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss index ddaf59a94f0..6a2a0fdb258 100644 --- a/src/lib/core/option/_option-theme.scss +++ b/src/lib/core/option/_option-theme.scss @@ -16,15 +16,15 @@ background: mat-color($background, hover); } - &.mat-selected.mat-primary, .mat-primary &.mat-selected { + .mat-primary &.mat-selected { color: mat-color($primary); } - &.mat-selected.mat-accent, .mat-accent &.mat-selected { + .mat-accent &.mat-selected { color: mat-color($accent); } - &.mat-selected.mat-warn, .mat-warn &.mat-selected { + .mat-warn &.mat-selected { color: mat-color($warn); } diff --git a/src/lib/core/option/option.html b/src/lib/core/option/option.html index 205fae26873..4ed75942756 100644 --- a/src/lib/core/option/option.html +++ b/src/lib/core/option/option.html @@ -1,8 +1,8 @@ + [state]="selected ? 'checked' : ''"> + [state]="selected ? 'checked' : ''"> diff --git a/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index 04e8c7cf8a9..871fadce6f6 100644 --- a/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -1,17 +1,5 @@ @import '../../theming/theming'; -@mixin _mat-pseudo-checkbox-inner-content-theme($theme, $palette-name) { - $palette: map-get($theme, $palette-name); - $color: mat-color($palette); - - .mat-pseudo-checkbox-checked.mat-#{$palette-name}, - .mat-pseudo-checkbox-indeterminate.mat-#{$palette-name}, - .mat-#{$palette-name} .mat-pseudo-checkbox-checked, - .mat-#{$palette-name} .mat-pseudo-checkbox-indeterminate { - background: $color; - } -} - @mixin mat-pseudo-checkbox-theme($theme) { $is-dark-theme: map-get($theme, is-dark); $primary: map-get($theme, primary); @@ -35,11 +23,28 @@ } } - @include _mat-pseudo-checkbox-inner-content-theme($theme, primary); - @include _mat-pseudo-checkbox-inner-content-theme($theme, accent); - @include _mat-pseudo-checkbox-inner-content-theme($theme, warn); + // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the + // theme from their parent, rather than implementing their own theming, which is why we + // don't attach to the `mat-*` classes. + .mat-pseudo-checkbox-checked, + .mat-pseudo-checkbox-indeterminate, + .mat-accent .mat-pseudo-checkbox-checked, + .mat-accent .mat-pseudo-checkbox-indeterminate { + background: mat-color(map-get($theme, accent)); + } - .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate { + .mat-primary .mat-pseudo-checkbox-checked, + .mat-primary .mat-pseudo-checkbox-indeterminate { + background: mat-color(map-get($theme, primary)); + } + + .mat-warn .mat-pseudo-checkbox-checked, + .mat-warn .mat-pseudo-checkbox-indeterminate { + background: mat-color(map-get($theme, warn)); + } + + .mat-pseudo-checkbox-checked, + .mat-pseudo-checkbox-indeterminate { &.mat-pseudo-checkbox-disabled { background: $disabled-color; } diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts index b3a82a4d9c8..a47534db61f 100644 --- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts +++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts @@ -6,31 +6,16 @@ * found in the LICENSE file at https://angular.io/license */ -import { - Component, - ViewEncapsulation, - Input, - ElementRef, - Renderer2, - ChangeDetectionStrategy, -} from '@angular/core'; -import {CanColor, mixinColor} from '../../common-behaviors/color'; +import {Component, ViewEncapsulation, Input, ChangeDetectionStrategy} from '@angular/core'; export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; - -// Boilerplate for applying mixins to MdChip. -/** @docs-private */ -export class MdPseudoCheckboxBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} -} -export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent'); - - /** * Component that shows a simplified checkbox without including any kind of "real" checkbox. * Meant to be used when the checkbox is purely decorative and a large number of them will be * included, such as for the options in a multi-select. Uses no SVGs or complex animations. + * Note that theming is meant to be handled by the parent element, e.g. + * `mat-primary .mat-pseudo-checkbox`. * * Note that this component will be completely invisible to screen-reader users. This is *not* * interchangeable with and should *not* be used if the user would directly interact @@ -44,7 +29,6 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent'); changeDetection: ChangeDetectionStrategy.OnPush, selector: 'md-pseudo-checkbox, mat-pseudo-checkbox', styleUrls: ['pseudo-checkbox.css'], - inputs: ['color'], template: '', host: { 'class': 'mat-pseudo-checkbox', @@ -53,14 +37,10 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent'); '[class.mat-pseudo-checkbox-disabled]': 'disabled', }, }) -export class MdPseudoCheckbox extends _MdPseudoCheckboxBase implements CanColor { +export class MdPseudoCheckbox { /** Display state of the checkbox. */ @Input() state: MdPseudoCheckboxState = 'unchecked'; /** Whether the checkbox is disabled. */ @Input() disabled: boolean = false; - - constructor(elementRef: ElementRef, renderer: Renderer2) { - super(renderer, elementRef); - } }