feat(checkbox): Add initial checkbox implementation (#4638)

* feat(animation): Clean up mdl-animation, add README * feat(checkbox): Add initial checkbox implementation This commit converts the checkbox POC code over to the new architecture, adds unit tests, and ports the demos over to working implementations. It also adds a README, and modifies .stylelintrc.yaml to increase the number of compound selectors we can use. Note that ink ripple functionality will be covered in a separate issue. Finishes #4471 [Delivers #126819487]
google · Aug 8, 2016 · 5bbe467 · 5bbe467
1 parent 1df786a
commit 5bbe467
Show file tree

Hide file tree

Showing 16 changed files with 1,473 additions and 245 deletions.
diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
@@ -188,7 +188,7 @@ rules:
   # Because we adhere to BEM we can limit the amount of necessary compound selectors. Most should
   # just be 1 level selector. However, modifiers can introduce an additional compound selector.
   # Futhermore, generic qualifying selectors (e.g. `[dir="rtl"]`) can introduce yet another level.
-  selector-max-compound-selectors: 3
+  selector-max-compound-selectors: 4
   # For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
   # attribute modifiers based on selector-max-compound-selectors, plus an addition for
   # pseudo-classes (4). Allow for pseudo-elements (1).
@@ -208,9 +208,14 @@ rules:
   selector-no-qualifying-type: true
   # In general, we should *never* be modifying elements within our components, since we can't
   # predict the use cases in which users would add a certain type of element into a component.
-  # An exception to this may be in packages/material-design-lite, in which case this rule could be
-  # disabled for that file, with an explanation.
-  selector-no-type: true
+  # The only hard exception to this are `fieldset` elements, which can be disabled and in that case
+  # we want our UI components within that fieldset to be disabled as well.
+  # Other exceptions to this may be in packages/material-design-lite, in which case this rule could
+  # be disabled for that file, with an explanation.
+  selector-no-type:
+    - true
+    - ignoreTypes:
+        - fieldset
   # Styles for components should never need the universal selector.
   selector-no-universal: true
   # Ensure any defined symbols are prefixed with "mdl-"
@@ -219,8 +224,7 @@ rules:
   custom-property-pattern: ^mdl?-.+
   selector-class-pattern:
     - ^mdl?-.+
-    -
-      resolveNestedSelectors: true
+    - resolveNestedSelectors: true
   selector-id-pattern: ^mdl?-.+
   # Names are more semantic than numbers
   font-weight-notation: named-where-possible
@@ -235,8 +239,7 @@ rules:
     -
       - /^TODO:/
       - /^FIXME:/
-    -
-      severity: warning
+    - severity: warning
   # Part of google's style guide
   number-leading-zero: never
 
@@ -249,6 +252,7 @@ rules:
     componentSelectors: ^\.mdl?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
     ignoreSelectors:
       - ^fieldset
+      - ^\[aria\-disabled=(?:.+)\]
 
   # SCSS naming patterns, just like our CSS conventions above.
   # (note for $-vars we use a leading underscore for "private" variables)

diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -14,50 +14,143 @@
   See the License for the specific language governing permissions and
   limitations under the License
 -->
-<html>
+<html class="mdl-typography">
   <head>
     <meta charset="utf-8">
     <title>MDL Checkbox Demo</title>
     <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
+    <style media="screen">
+      section {
+        margin-top: .5rem;
+        padding: 0 .5rem 1rem .5rem;
+      }
+
+      .dark-theme {
+        background: #262626;
+        color: white;
+      }
+
+      .dark-theme > h2 {
+        margin-top: 0;
+      }
+
+      /* Example of manually theming a checkbox. Note that this does not take JS-provided animations
+         into account. */
+      .dark-theme .mdl-checkbox__native-control:checked:not(:disabled) ~ .mdl-checkbox__background,
+      .dark-theme .mdl-checkbox__native-control:indeterminate:not(:disabled) ~ .mdl-checkbox__background {
+        background-color: #E91E63;
+        border-color: #E91E63;
+      }
+      .dark-theme .mdl-checkbox__background::before {
+        background-color: #E91E63;
+      }
+      .dark-theme .mdl-checkbox__checkmark__path {
+        stroke: #262626 !important;
+      }
+      .dark-theme .mdl-checkbox__mixedmark {
+        background-color: #262626;
+      }
+    </style>
   </head>
   <body>
     <main>
-      <h1>MDL Checkbox Hello</h1>
+      <h1>MDL Checkbox</h1>
       <section>
-        <h2>Auto-initialized checkbox</h2>
-        <!-- TODO change from "md-" to "mdl-" -->
-        <div class="md-checkbox-wrapper">
-          <div class="md-checkbox-wrapper__layout">
-            <div class="md-checkbox" data-mdl-auto-init="MDLCheckbox">
+        <h2>Basic Example, no Javascript</h2>
+        <div class="mdl-checkbox-wrapper">
+          <div class="mdl-checkbox-wrapper__layout">
+            <div class="mdl-checkbox">
+              <input type="checkbox"
+                     id="basic-checkbox"
+                     class="mdl-checkbox__native-control"
+                     aria-labelledby="basic-checkbox-label"/>
+              <div class="mdl-checkbox__background">
+                <svg version="1.1"
+                     class="mdl-checkbox__checkmark"
+                     xmlns="http://www.w3.org/2000/svg"
+                     viewBox="0 0 24 24"
+                     xml:space="preserve">
+                  <path class="mdl-checkbox__checkmark__path"
+                        fill="none"
+                        stroke="white"
+                        d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                </svg>
+                <div class="mdl-checkbox__mixedmark"></div>
+              </div>
+            </div>
+            <label for="basic-checkbox" id="basic-checkbox-label">This is my checkbox</label>
+          </div>
+        </div>
+        <button type="button" onclick="document.getElementById('basic-checkbox').indeterminate = true;">Make indeterminate</button>
+        <button type="button" onclick="this.parentElement.hasAttribute('dir') ? this.parentElement.removeAttribute('dir') : this.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
+        <button type="button" onclick="document.querySelector('.mdl-checkbox-wrapper').classList.toggle('mdl-checkbox-wrapper--align-end');">Toggle Align End</button>
+        <button type="button" onclick="document.getElementById('basic-checkbox').disabled = !document.getElementById('basic-checkbox').disabled;">Toggle Disabled</button>
+      </section>
+      <section>
+        <h2>With Javascript</h2>
+        <div class="mdl-checkbox-wrapper">
+          <div class="mdl-checkbox-wrapper__layout">
+            <div id="mdl-js-checkbox" class="mdl-checkbox">
+              <input type="checkbox"
+                     id="my-checkbox"
+                     class="mdl-checkbox__native-control"
+                     aria-labelledby="my-checkbox-label"/>
+              <div class="mdl-checkbox__background">
+                <svg version="1.1"
+                     class="mdl-checkbox__checkmark"
+                     xmlns="http://www.w3.org/2000/svg"
+                     viewBox="0 0 24 24"
+                     xml:space="preserve">
+                  <path class="mdl-checkbox__checkmark__path"
+                        fill="none"
+                        stroke="white"
+                        d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                </svg>
+                <div class="mdl-checkbox__mixedmark"></div>
+              </div>
+            </div>
+            <label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
+          </div>
+        </div>
+        <button type="button" id="make-ind">Make indeterminate</button>
+      </section>
+      <section class="dark-theme">
+        <h2>Dark Theme</h2>
+        <div class="mdl-checkbox-wrapper">
+          <div class="mdl-checkbox-wrapper__layout">
+            <div id="mdl-checkbox-dark" class="mdl-checkbox mdl-checkbox--dark-theme">
               <input type="checkbox"
-                     class="md-checkbox__native-control"
+                     id="checkbox-dark"
+                     class="mdl-checkbox__native-control"
                      aria-labelledby="my-checkbox-label"/>
-              <div class="md-checkbox__frame"></div>
-              <div class="md-checkbox__background">
+              <div class="mdl-checkbox__background">
                 <svg version="1.1"
-                     class="md-checkbox__checkmark"
+                     class="mdl-checkbox__checkmark"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      xml:space="preserve">
-                  <path class="md-checkbox__checkmark__path"
+                  <path class="mdl-checkbox__checkmark__path"
                         fill="none"
                         stroke="white"
-                        d="M4.1,12.7 9,17.6 20.3,6.3"/>
+                        d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                 </svg>
-                <div class="md-checkbox__mixedmark"></div>
+                <div class="mdl-checkbox__mixedmark"></div>
               </div>
             </div>
-            <label id="my-checkbox-label">This is my checkbox</label>
+            <label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
           </div>
         </div>
+        <button type="button" onclick="document.getElementById('checkbox-dark').disabled = !document.getElementById('checkbox-dark').disabled;">Toggle Disabled</button>
       </section>
     </main>
     <script src="assets/material-design-lite.js" charset="utf-8"></script>
-    <script id="auto-init">
+    <script>
       (function(global) {
         'use strict';
-        var mdl = global.mdl;
-        mdl.autoInit();
+        var checkbox = new global.mdl.Checkbox(document.getElementById('mdl-js-checkbox'));
+        document.getElementById('make-ind').addEventListener('click', function() {
+          document.getElementById('my-checkbox').indeterminate = true;
+        });
       })(this);
     </script>
   </body>

diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,6 @@
+# NOTE: Not currently functional.
+
+We've recently [changed our architecture]() such that these examples are outdated and probably don't
+work. We will fix them up before our beta release, as things may still change until then.
+
+Working framework examples for v2 can be found on our [POC branch](https://github.com/google/material-design-lite/tree/experimental/v2-architecture-poc/examples).
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "css-loader": "^0.23.1",
     "cz-conventional-changelog": "^1.1.6",
     "del-cli": "^0.2.0",
+    "dom-compare": "^0.2.1",
     "dom-events": "^0.1.1",
     "es6-promise": "^3.2.1",
     "eslint": "^2.12.0",
@@ -60,7 +61,7 @@
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "stylefmt": "^4.1.1",
-    "stylelint": "^7.0.3",
+    "stylelint": "^7.1.0",
     "stylelint-config-standard": "^11.0.0",
     "stylelint-scss": "^1.2.1",
     "stylelint-selector-bem-pattern": "^1.0.0",

diff --git a/packages/mdl-animation/README.md b/packages/mdl-animation/README.md
@@ -0,0 +1,57 @@
+# mdl-animation
+
+mdl-animation is a sass / css library which provides variables, mixins, and classes for Material Design animation, based off of the [motion guidelines](https://material.google.com/motion/duration-easing.html#duration-easing-common-durations). Currently, it only covers easing curves.
+
+## Installation
+
+> Note: Installation via the npm registry will be available after alpha.
+
+## Usage
+
+We currently have variables for the following 3 animation curves:
+
+| Variable name | timing function | use case |
+| --- | --- | --- |
+| `$mdl-animation-fast-out-slow-in-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Standard curve; any animations that are visible from start to finish (e.g. a FAB transforming into a toolbar) |
+| `$mdl-animation-linear-out-slow-in-timing-function` | `cubic-bezier(0, 0, .2, 1)` | Animations that cause objects to enter the screen (e.g. a fade in) |
+| `$mdl-animation-fast-out-linear-in-timing-function` | `cubic-bezier(.4, 0, ``, 1)` | Animations that cause objects to leave the screen (e.g. a fade out) |
+
+### SCSS
+
+Simply drop `mdl-animation` into your build and start using the variables:
+
+```scss
+.mdl-thing--animating {
+  animation: foo 175ms $mdl-animation-fast-out-slow-in-timing-function;
+}
+```
+
+or the mixins, which simply assign their corresponding variables to the `animation-timing-function`
+property:
+
+```scss
+.mdl-thing--on-screen {
+  @include mdl-animation-fast-out-linear-in;
+}
+```
+
+Every mixin has the same name as its corresponding variable, without the `-timing-function` suffix.
+
+### CSS Classes
+
+> NOTE: dist/ will be available when installing via NPM.
+
+Alternatively, you can include the built stylesheet and use the classes it exports within your HTML
+
+```html
+<link href="path/to/mdl-animation/dist/mdl-animation.css" rel="stylesheet">
+<!-- ... -->
+<div id="my-animating-div" class="mdl-animation-fast-out-slow-in">hi</div>
+```
+
+CSS Classes have the exact same name as their mixin counterparts.
+
+### Overriding the default curves.
+
+All animation variables are marked with `!default`, thus they can be overridden should the need
+arise.
diff --git a/packages/mdl-animation/_variables.scss b/packages/mdl-animation/_variables.scss
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-$mdl-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, .1) !default;
+$mdl-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, 1) !default;
 $mdl-animation-fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
 $mdl-animation-fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
diff --git a/packages/mdl-animation/package.json b/packages/mdl-animation/package.json
@@ -1,6 +1,7 @@
 {
   "name": "mdl-animation",
+  "description": "Animation Variables and Mixins for Material Design",
   "version": "1.0.0",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "devDependencies": {}
 }