refactor: abstract checkbox presentation to standalone component

Moves the presentation logic from the `md-checkbox` to a `md-pseudo-checkbox` that can be re-used in other components, like `md-select` and `md-selection-list`. Renames and refactors a bunch of CSS classes, unit tests, properties etc. Relates to angular#2412.
crisbeto · Jan 10, 2017 · 5b1073f · 5b1073f
1 parent d4ab3d3
commit 5b1073f
Show file tree

Hide file tree

Showing 13 changed files with 847 additions and 644 deletions.
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
@@ -2,71 +2,9 @@
 
 
 @mixin md-checkbox-theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-
-
-  // The color of the checkbox border.
-  $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;
-
-  // The color of the checkbox's checkmark / mixedmark.
-  $checkbox-mark-color: md-color($background, background);
-
-  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
-  // this does not work well with elements layered on top of one another. To get around this we
-  // blend the colors together based on the base color and the theme background.
-  $white-30pct-opacity-on-dark: #686868;
-  $black-26pct-opacity-on-light: #b0b0b0;
-  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
-
-  .md-checkbox-frame {
-    border-color: $checkbox-border-color;
-  }
-
-  .md-checkbox-checkmark {
-    fill: $checkbox-mark-color;
-  }
-
-  .md-checkbox-checkmark-path {
-    // !important is needed here because a stroke must be set as an attribute on the SVG in order
-    // for line animation to work properly.
-    stroke: $checkbox-mark-color !important;
-  }
-
-  .md-checkbox-mixedmark {
-    background-color: $checkbox-mark-color;
-  }
-
-  .md-checkbox-indeterminate, .md-checkbox-checked {
-    &.md-primary .md-checkbox-background {
-      background-color: md-color($primary, 500);
-    }
-
-    &.md-accent .md-checkbox-background {
-      background-color: md-color($accent, 500);
-    }
-
-    &.md-warn .md-checkbox-background {
-      background-color: md-color($warn, 500);
-    }
-  }
-
-  .md-checkbox-disabled {
-    &.md-checkbox-checked, &.md-checkbox-indeterminate {
-      .md-checkbox-background {
-        background-color: $disabled-color;
-      }
-    }
-
-    &:not(.md-checkbox-checked) {
-      .md-checkbox-frame {
-        border-color: $disabled-color;
-      }
-    }
-  }
 
   .md-checkbox:not(.md-checkbox-disabled) {
     &.md-primary .md-checkbox-ripple .md-ripple-foreground {

diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
@@ -20,21 +20,12 @@
          [mdRippleCentered]="true"
          [mdRippleSpeedFactor]="0.3"
          mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
-    <div class="md-checkbox-frame"></div>
-    <div class="md-checkbox-background">
-      <svg version="1.1"
-           class="md-checkbox-checkmark"
-           xmlns="http://www.w3.org/2000/svg"
-           viewBox="0 0 24 24"
-           xml:space="preserve">
-        <path class="md-checkbox-checkmark-path"
-              fill="none"
-              stroke="white"
-              d="M4.1,12.7 9,17.6 20.3,6.3"/>
-      </svg>
-      <!-- Element for rendering the indeterminate state checkbox. -->
-      <div class="md-checkbox-mixedmark"></div>
-    </div>
+
+    <md-pseudo-checkbox
+      [color]="color"
+      [checked]="checked"
+      [indeterminate]="indeterminate"
+      [disabled]="disabled"></md-pseudo-checkbox>
   </div>
   <span class="md-checkbox-label">
     <ng-content></ng-content>