fix(switch): Remove checkbox references from SCSS (#352)

- Remove all references to mdc-checkbox in mdc-theme-dark mixin - Add `mdc-switch-transition` function and replace calls to `mdc-checkbox-transition` with that function - (techdebt) Update cross-env and cz-conventional-changelog - (techdebt) Add allowed scopes to validate-commit-msg config, and docs on how to add new scopes when a component is added. Fixes #322
material-components · Feb 27, 2017 · ac88267 · ac88267
1 parent 8cfe07d
commit ac88267
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 20 deletions.
diff --git a/docs/authoring-components.md b/docs/authoring-components.md
@@ -725,6 +725,10 @@ Concretely:
   contains javascript, ensure that its component namespace is exported within
   `material-components-web`, and it is registered with `mdc-auto-init`. Lastly, remember to add it
   to `package.json` of `material-components-web`.
+- Ensure that the correct **commit subject** for the package is added to the
+  `config.validate-commit-msg.scope.allowed` array within the top-level `package.json` at the root
+  of the repo. The commit subject is the _name the component, without the `mdc-`/`@material/`_.
+  E.g., for `mdc-icon-toggle`, the correct subject is `icon-toggle`.
 
 ### Testing
 

diff --git a/package.json b/package.json
@@ -33,9 +33,9 @@
     "chai": "^3.5.0",
     "cli-table": "^0.3.1",
     "cp-file": "^4.1.0",
-    "cross-env": "^2.0.0",
+    "cross-env": "^3.1.4",
     "css-loader": "0.14.5",
-    "cz-conventional-changelog": "^1.1.6",
+    "cz-conventional-changelog": "^2.0.0",
     "del-cli": "^0.2.0",
     "dom-events": "^0.1.1",
     "eslint": "^3.6.1",
@@ -101,7 +101,40 @@
   },
   "config": {
     "validate-commit-msg": {
-      "helpMessage": "\nNOTE: Please see angular's commit message guidelines (https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit) for information on how to format commit messages.\n\nAs an example, here is a valid commit message: 'docs(slider): Document slider public api'\n\nIf this commit is on a development / WIP branch, you can disable this by running `git commit --no-verify`."
+      "helpMessage": "\nNOTE: Please see angular's commit message guidelines (https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit) for information on how to format commit messages.\n\nAs an example, here is a valid commit message: 'docs(slider): Document slider public api'\n\nIf this commit is on a development / WIP branch, you can disable this by running `git commit --no-verify`.",
+      "scope": {
+        "allowed": [
+          "animation",
+          "auto-init",
+          "base",
+          "button",
+          "card",
+          "checkbox",
+          "drawer",
+          "elevation",
+          "fab",
+          "form-field",
+          "grid-list",
+          "icon-toggle",
+          "layout-grid",
+          "list",
+          "menu",
+          "radio",
+          "ripple",
+          "rtl",
+          "select",
+          "snackbar",
+          "switch",
+          "textfield",
+          "theme",
+          "toolbar",
+          "typography",
+          "demos",
+          "framework-examples",
+          "infrastructure"
+        ],
+        "validate": true
+      }
     },
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

diff --git a/packages/mdc-switch/mdc-switch.scss b/packages/mdc-switch/mdc-switch.scss
@@ -19,6 +19,10 @@
 @import "./mixins";
 @import "./variables";
 
+@function mdc-switch-transition($property) {
+  @return $property 90ms $mdc-switch-transition-curve;
+}
+
 // postcss-bem-linter: define switch
 .mdc-switch {
   display: inline-block;
@@ -47,7 +51,7 @@
     cursor: pointer;
     user-select: none;
 
-    @include mdc-theme-dark(".mdc-checkbox") {
+    @include mdc-theme-dark(".mdc-switch") {
       background-color: transparent;
     }
 
@@ -59,14 +63,14 @@
       bottom: 0;
       left: 0;
       transition:
-        mdc-checkbox-transition(opacity, $mdc-switch-transition-curve),
-        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        mdc-switch-transition(opacity),
+        mdc-switch-transition(background-color);
       border-radius: 7px;
       background-color: $mdc-switch-unchecked-track-color;
       content: "";
       opacity: .38;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-track-color-dark;
         opacity: .3;
       }
@@ -82,12 +86,12 @@
       height: $mdc-switch-knob-diameter;
       transform: translateX(0);
       transition:
-        mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        mdc-switch-transition(transform),
+        mdc-switch-transition(background-color);
       border-radius: $mdc-switch-knob-diameter / 2;
       background-color: $mdc-switch-unchecked-knob-color;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-knob-color-dark;
       }
 
@@ -104,8 +108,8 @@
         height: $mdc-switch-focus-ring-diameter;
         transform: scale(0);
         transition:
-          mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-          mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+          mdc-switch-transition(transform),
+          mdc-switch-transition(background-color);
         border-radius: $mdc-switch-focus-ring-diameter / 2;
         background-color: transparent;
         content: "";
@@ -123,12 +127,12 @@
       height: $mdc-switch-focus-ring-diameter;
       transform: scale(1);
       transition:
-        mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        mdc-switch-transition(transform),
+        mdc-switch-transition(background-color);
       border-radius: $mdc-switch-focus-ring-diameter / 2;
       background-color: $mdc-switch-unchecked-focus-ring-color;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-focus-ring-color-dark;
         opacity: .14;
       }
@@ -146,15 +150,15 @@
   .mdc-switch__knob {
     transform: translateX($mdc-switch-track-width - $mdc-switch-knob-diameter);
     transition:
-      mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-      mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+      mdc-switch-transition(transform),
+      mdc-switch-transition(background-color);
 
     @include mdc-theme-prop(background-color, primary);
 
     &::before {
       @include mdc-theme-prop(background-color, primary);
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         @include mdc-theme-prop(background-color, primary);
       }
 
@@ -174,7 +178,7 @@
     background-color: $mdc-switch-unchecked-track-color;
     opacity: .12;
 
-    @include mdc-theme-dark(".mdc-checkbox") {
+    @include mdc-theme-dark(".mdc-switch") {
       background-color: $mdc-switch-unchecked-track-color-dark;
       opacity: .1;
     }
@@ -183,7 +187,7 @@
   .mdc-switch__knob {
     background-color: $mdc-switch-disabled-knob-color;
 
-    @include mdc-theme-dark(".mdc-checkbox") {
+    @include mdc-theme-dark(".mdc-switch") {
       background-color: $mdc-switch-disabled-knob-color-dark;
     }
   }