feat(checkbox): Add ripples to checkboxes (#206)

material-components · Jan 24, 2017 · 8aa1c3d · 8aa1c3d
1 parent eef6fe8
commit 8aa1c3d
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 96 deletions.
diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -103,6 +103,7 @@ <h2>With Javascript</h2>
                       d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
               </svg>
               <div class="mdc-checkbox__mixedmark"></div>
+
             </div>
           </div>
           <label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>

diff --git a/packages/mdc-checkbox/_variables.scss b/packages/mdc-checkbox/_variables.scss
@@ -20,7 +20,9 @@ $mdc-checkbox-border-color-dark: white !default;
 $mdc-checkbox-disabled-color: rgba(black, .26) !default;
 $mdc-checkbox-disabled-color-dark: rgba(white, .3) !default;
 
+$mdc-checkbox-touch-area: 40px;
 $mdc-checkbox-size: 18px;
+$mdc-checkbox-ui-pct: percentage($mdc-checkbox-size / $mdc-checkbox-touch-area);
 $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size;
 $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;

diff --git a/packages/mdc-checkbox/index.js b/packages/mdc-checkbox/index.js
@@ -15,7 +15,9 @@
  */
 
 import {MDCComponent} from '@material/base';
+import {MDCRipple, MDCRippleFoundation} from '@material/ripple';
 import {getCorrectEventName} from '@material/animation';
+
 import MDCCheckboxFoundation from './foundation';
 
 export {MDCCheckboxFoundation};
@@ -30,6 +32,33 @@ export class MDCCheckbox extends MDCComponent {
     return this.root_.querySelector(NATIVE_CONTROL_SELECTOR);
   }
 
+  constructor(...args) {
+    super(...args);
+    this.ripple_ = this.initRipple_();
+  }
+
+  initRipple_() {
+    const adapter = Object.assign(MDCRipple.createAdapter(this), {
+      isUnbounded: () => true,
+      registerInteractionHandler: (type, handler) => this.nativeCb_.addEventListener(type, handler),
+      deregisterInteractionHandler: (type, handler) => this.nativeCb_.removeEventListener(type, handler),
+      computeBoundingRect: () => {
+        const {left, top} = this.root_.getBoundingClientRect();
+        const DIM = 40;
+        return {
+          top,
+          left,
+          right: left + DIM,
+          bottom: top + DIM,
+          width: DIM,
+          height: DIM,
+        };
+      },
+    });
+    const foundation = new MDCRippleFoundation(adapter);
+    return new MDCRipple(this.root_, foundation);
+  }
+
   getDefaultFoundation() {
     return new MDCCheckboxFoundation({
       addClass: (className) => this.root_.classList.add(className),
@@ -69,4 +98,10 @@ export class MDCCheckbox extends MDCComponent {
   set disabled(disabled) {
     this.foundation_.setDisabled(disabled);
   }
+
+  destroy() {
+    this.ripple_.destroy();
+    super.destroy();
+  }
+
 }
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -1,20 +1,21 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+// 
+// Copyright 2016 Google Inc. All Rights Reserved.
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//      http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
 
 @import "@material/animation/functions";
+@import "@material/ripple/mixins";
 @import "@material/animation/mixins";
 @import "./variables";
 @import "./keyframes";
@@ -40,20 +41,22 @@
 }
 
 @mixin mdc-checkbox-outer-box {
-  border-radius: 2px;
-
   @include mdc-checkbox-cover-element;
 
+  top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
+  left: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
+  border-radius: 2px;
   box-sizing: border-box;
   pointer-events: none;
 }
 
-/* postcss-bem-linter: define checkbox */
+// postcss-bem-linter: define checkbox
 .mdc-checkbox {
   display: inline-block;
   position: relative;
   width: $mdc-checkbox-size;
   height: $mdc-checkbox-size;
+  padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
   line-height: 0;
   white-space: nowrap;
   cursor: pointer;
@@ -65,6 +68,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: $mdc-checkbox-ui-pct;
+    height: $mdc-checkbox-ui-pct;
+    box-sizing: border-box;
     transition:
       mdc-checkbox-transition-exit(background-color),
       mdc-checkbox-transition-exit(border-color);
@@ -76,10 +82,12 @@
       border-color: $mdc-checkbox-border-color-dark;
     }
 
-    /** The frame's ::before element is used as a focus indicator for the checkbox */
+    // The frame's ::before element is used as a focus indicator for the checkbox
     &::before {
       @include mdc-checkbox-cover-element;
 
+      width: 100%;
+      height: 100%;
       transform: scale(0, 0);
       transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
       border-radius: 50%;
@@ -203,7 +211,7 @@ fieldset:disabled .mdc-checkbox__native-control,
 [aria-disabled="true"] .mdc-checkbox__native-control {
   cursor: default;
 
-  /* postcss-bem-linter: ignore */
+  // postcss-bem-linter: ignore
   ~ .mdc-checkbox__background {
     border-color: $mdc-checkbox-disabled-color;
 
@@ -217,11 +225,11 @@ fieldset:disabled .mdc-checkbox__native-control,
     ~ .mdc-checkbox__background {
       border-color: transparent;
       background-color: $mdc-checkbox-disabled-color;
-      /* stylelint-disable selector-max-compound-selectors, selector-max-specificity */
+      // stylelint-disable selector-max-compound-selectors, selector-max-specificity
       @include mdc-theme-dark(".mdc-checkbox") {
         background-color: $mdc-checkbox-disabled-color-dark;
       }
-      /* stylelint-enable selector-max-compound-selectors, selector-max-specificity */
+      // stylelint-enable selector-max-compound-selectors, selector-max-specificity
     }
   }
 }
@@ -306,5 +314,14 @@ fieldset:disabled .mdc-checkbox__native-control,
     }
   }
 }
+// postcss-bem-linter: end
 
-/* postcss-bem-linter: end */
+.mdc-checkbox.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
+  .mdc-checkbox__background::before {
+    content: none;
+  }
+}
diff --git a/packages/mdc-checkbox/package.json b/packages/mdc-checkbox/package.json
@@ -9,8 +9,9 @@
     "url": "https://github.com/material-components/material-components-web.git"
   },
   "dependencies": {
-    "@material/animation": "^0.1.3",
-    "@material/base": "^0.1.1",
-    "@material/theme": "^0.1.1"
+    "@material/animation": "^0.1.1",
+    "@material/base": "^0.1.0",
+    "@material/ripple": "^0.1.1",
+    "@material/theme": "^0.1.0"
   }
 }
diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss
@@ -1,18 +1,18 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+// 
+// Copyright 2016 Google Inc. All Rights Reserved.
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//      http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// 
 
 @import "@material/animation/functions";
 @import "@material/ripple/mixins";
@@ -31,7 +31,7 @@ $mdc-radio-transition-duration: 120ms;
   @return mdc-animation-exit($name, $mdc-radio-transition-duration);
 }
 
-/* postcss-bem-linter: define radio */
+// postcss-bem-linter: define radio
 .mdc-radio {
   display: inline-block;
   position: relative;
@@ -185,7 +185,7 @@ fieldset:disabled .mdc-radio__native-control,
   }
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
 
 .mdc-radio.mdc-ripple-upgraded {
   @include mdc-ripple-base;

diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
@@ -1,18 +1,17 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+// 
+// Copyright 2016 Google Inc. All Rights Reserved.
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//      http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// 
 
 @import "@material/theme/variables";
 @import "./keyframes";
@@ -50,7 +49,7 @@
   $opacity: map-get($config, opacity);
   $theme-style: map-get($config, theme-style);
 
-  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($theme-style) {
     $theme-value: map-get($mdc-theme-property-values, $theme-style);
     $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
@@ -66,7 +65,7 @@
   } @else {
     background-color: rgba($base-color, $opacity);
   }
-  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 }
 
 @mixin mdc-ripple-bg-base_($config) {
@@ -90,7 +89,7 @@
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
 
-  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
     &#{$pseudo} {
       @include mdc-ripple-bg-base_($config);
@@ -100,7 +99,7 @@
   } @else {
     @include mdc-ripple-bg-base_($config);
   }
-  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
   &.mdc-ripple-upgraded--background-active#{$pseudo} {
     opacity: .99999;
@@ -143,7 +142,7 @@
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
 
-  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
     &#{$pseudo} {
       @include mdc-ripple-fg-base_($config);
@@ -153,7 +152,7 @@
   } @else {
     @include mdc-ripple-fg-base_($config);
   }
-  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
   &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
     top: calc(var(--mdc-ripple-top) - var(--mdc-ripple-fg-size) / 2);

diff --git a/packages/mdc-ripple/_variables.scss b/packages/mdc-ripple/_variables.scss
@@ -1,17 +1,17 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+// 
+// Copyright 2016 Google Inc. All Rights Reserved.
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//      http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// 
 
 $mdc-ripple-easing-fn: cubic-bezier(.157, .72, .386, .987);