Merge branch 'master' into fix/checkbox/remove-native-control

.travis.yml

@@ -1,5 +1,11 @@
 language: node_js
 
+# Opt-in to Travis's container infrastructure. This potentially makes builds less flaky, and easier to debug.
+# - https://docs.travis-ci.com/user/reference/trusty/#container-based-with-sudo-false
+# - https://docs.travis-ci.com/user/common-build-problems/#troubleshooting-locally-in-a-docker-image
+# - https://blog.travis-ci.com/2014-12-17-faster-builds-with-container-based-infrastructure/#what-benefits-does-this-new-infrastructure-have
+sudo: false
+
 branches:
   # Only run Travis on:
   #   A) Commits made directly to the `master` branch (i.e., merged PRs); and

docs/open_source/release-process.md

@@ -78,15 +78,18 @@ pass prior to releasing (lerna will update versions for us in the next step).
 ### For Pre-releases
 
 ```
-$(npm bin)/lerna publish --skip-git --npm-tag=next
+$(npm bin)/lerna publish --skip-git --npm-tag=next --since=<previous-patch-tag>
 ```
 
-When lerna prompts for version, choose Prerelease.
+When lerna prompts for version, choose Pre-minor.
 
 Be sure to include the command-line flags:
 
 * `--skip-git` avoids immediately applying a git tag, which we will do later after updating the changelog
 * `--npm-tag=next` avoids updating the `latest` tag on npm, since pre-releases should not be installed by default
+* `--since=<previous-patch-tag>` (e.g. `--since=v0.36.1`) forces lerna to diff against the latest patch; otherwise,
+  it diffs against the previous minor release which may cause some packages without changes to be published (this
+  happens when bugfix releases aren't tagged from the master branch)
 
 ### For Minor Releases
 
@@ -101,7 +104,7 @@ Be sure to include the command-line flags:
 * `--skip-git` avoids immediately applying a git tag, which we will do later after updating the changelog
 * `--since=<previous-patch-tag>` (e.g. `--since=v0.36.1`) forces lerna to diff against the latest patch; otherwise,
   it diffs against the previous minor release which may cause some packages without changes to be published (this
-  happens because bugfix releases aren't tagged from the master branch)
+  happens when bugfix releases aren't tagged from the master branch)
 
 ### For Patch Releases
 
@@ -126,38 +129,23 @@ git commit -am "chore: Publish"
 
 ## Update Changelog and Create Git Tag
 
-### For Pre-Releases and Patch Releases
-
 It's recommended to generate the changelog prior to running the post-release script so you can double-check the changes
 before it creates a tag:
 
 ```
 npm run changelog
 git diff # Review the changelog and make sure it looks OK
-./scripts/post-release.sh # This will commit the changelog diff and then create a tag
-```
-
-### For Minor Releases
-
-First, update the changelog without committing it:
-
 ```
-npm run changelog
-```
-
-Next, edit the changelog:
-
-* Bring any changes from any prior pre-releases under their respective headings for the new final release
-* Remove headings for the pre-releases
-* Remove any duplicated items in the new minor release that were already listed under patch releases
 
-See [this v0.36.0 commit](https://github.com/material-components/material-components-web/commit/13fd6784866864839d0d287b3703b3beb0888d9c)
-for an example of the resulting changes after moving the pre-release notes.
+In certain cases, there are some typical edits to make the changelog easier to read:
 
-This will make the changelog easier to read, since users won't be interested in the pre-releases once the final is
-tagged, and shouldn't need to read the new release's changes across multiple headings.
+* **For a minor release or pre-release after an off-master patch release:**
+  Remove any duplicated items in the new minor release that were already listed under patch releases.
+* **For a minor release after any pre-releases:**
+  Bring any changes from any prior pre-releases under their respective headings for the new final release, then
+  remove the pre-release headings ([example](https://github.com/material-components/material-components-web/commit/13fd6784))
 
-Finally, run the post-release script to commit the updated changelog and apply a git tag:
+Once you're sure about the changes, run the `post-release` script to commit and create an annotated git tag:
 
 ```
 ./scripts/post-release.sh
@@ -169,21 +157,27 @@ Finally, run the post-release script to commit the updated changelog and apply a
 
 You will need to temporarily alter Github's master branch protection in order to push after the release:
 
-1. Go to the [settings page](https://github.com/material-components/material-components-web/settings/branches/master)
+1. Go to the [Branches settings page](https://github.com/material-components/material-components-web/settings/branches)
+1. Under Branch Protection Rules, click Edit next to `master`
 1. Uncheck "Include administrators"
 1. Click "Save changes"
 1. Perform the process outlined in one of the sections below
 1. Don't forget to re-enable "Include administrators" & click "Save changes" afterwards
 
 ### For Pre-releases and Minor Releases
 
-`git push origin master && git push origin <tag>`
+```
+git push origin master <tag>
+```
 
 This will ensure the new commits *and* tag are pushed to the remote git repository.
+(e.g. `git push origin master v0.39.0`)
 
 ### For Patch Releases
 
-`git push origin <tag>`
+```
+git push origin <tag>
+```
 
 We don't need to push a branch for bugfix releases since we only cherry-pick commits for them at release time and they
 are not tagged from master (which contains all commits, not just bugfixes).
@@ -233,16 +227,11 @@ Below is the process when a `next` branch is used:
 1. Reset the `next` branch against master to be reused for the next release (this will change the `next` branch's history):
    1. `git checkout next`
    1. `git fetch origin && git reset --hard origin/master`
-   1. Temporarily turn off branch protection *completely* for the `next` branch (to enable force-push)
+   1. [Temporarily unprotect the next branch](https://github.com/material-components/material-components-web-catalog/settings/branches)
+      by changing the `[mn][ae][sx]t*` rule match to just `master`
+      (this looks weird, but GitHub chose to use limited fnmatch syntax rather than RegExp, for some reason)
    1. `git push -f origin next`
-   1. Re-protect the `next` branch - check the following, then click Save changes:
-      * Protect this branch
-      * Require pull request reviews before merging
-      * Require status checks to pass before merging
-      * Require branches to be up to date before merging
-      * cla/google status check
-      * Include administrators
-      * Restrict who can push to this branch
+   1. Re-protect the `next` branch by changing the `master` rule match back to `[mn][ae][sx]t*`
 
 ## Log Issues in MDC React Repository
 

packages/mdc-checkbox/README.md

@@ -159,10 +159,6 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | --- | --- |
 | `addClass(className: string) => void` | Adds a class to the root element. |
 | `removeClass(className: string) => void` | Removes a class from the root element. |
-| `registerAnimationEndHandler(handler: EventListener) => void` | Registers an event handler to be called when an `animationend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly. |
-| `deregisterAnimationEndHandler(handler: EventListener) => void` | Deregisters an event handler from an `animationend` event listener. This will only be called with handlers that have previously been passed to `registerAnimationEndHandler` calls. |
-| `registerChangeHandler(handler: EventListener) => void` | Registers an event handler to be called when a `change` event is triggered on the native control (_not_ the root element). |
-| `deregisterChangeHandler(handler: EventListener) => void` | Deregisters an event handler that was previously passed to `registerChangeHandler`. |
 | `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|
 | `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |
 | `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |
@@ -179,3 +175,5 @@ Method Signature | Description
 `setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.
 `getValue() => string` | Returns the value of `MDCCheckboxAdapter.getNativeControl().value`. Returns `null` if `getNativeControl()` does not return an object.
 `setValue(value: string) => void` | Sets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does not return an object.
+`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.
+`handleChange() => void` | `change` event handler that should be applied to the checkbox element.

packages/mdc-checkbox/adapter.js

@@ -62,18 +62,6 @@ class MDCCheckboxAdapter {
    */
   removeNativeControlAttr(attr) {}
 
-  /** @param {!EventListener} handler */
-  registerAnimationEndHandler(handler) {}
-
-  /** @param {!EventListener} handler */
-  deregisterAnimationEndHandler(handler) {}
-
-  /** @param {!EventListener} handler */
-  registerChangeHandler(handler) {}
-
-  /** @param {!EventListener} handler */
-  deregisterChangeHandler(handler) {}
-
   /** @return {!MDCSelectionControlState} */
   getNativeControl() {}
 

packages/mdc-checkbox/foundation.js

@@ -57,10 +57,6 @@ class MDCCheckboxFoundation extends MDCFoundation {
       removeClass: (/* className: string */) => {},
       setNativeControlAttr: (/* attr: string, value: string */) => {},
       removeNativeControlAttr: (/* attr: string */) => {},
-      registerAnimationEndHandler: (/* handler: EventListener */) => {},
-      deregisterAnimationEndHandler: (/* handler: EventListener */) => {},
-      registerChangeHandler: (/* handler: EventListener */) => {},
-      deregisterChangeHandler: (/* handler: EventListener */) => {},
       getNativeControl: () => /* !MDCSelectionControlState */ {},
       forceLayout: () => {},
       isAttachedToDOM: () => /* boolean */ {},
@@ -83,25 +79,20 @@ class MDCCheckboxFoundation extends MDCFoundation {
     /** @private {number} */
     this.animEndLatchTimer_ = 0;
 
-    this.animEndHandler_ = /** @private {!EventListener} */ (
-      () => this.handleAnimationEnd());
-
-    this.changeHandler_ = /** @private {!EventListener} */ (
-      () => this.handleChange());
+    /** @private {boolean} */
+    this.enableAnimationEndHandler_ = false;
   }
 
   /** @override */
   init() {
     this.currentCheckState_ = this.determineCheckState_();
     this.updateAriaChecked_();
     this.adapter_.addClass(cssClasses.UPGRADED);
-    this.adapter_.registerChangeHandler(this.changeHandler_);
     this.installPropertyChangeHooks_();
   }
 
   /** @override */
   destroy() {
-    this.adapter_.deregisterChangeHandler(this.changeHandler_);
     this.uninstallPropertyChangeHooks_();
   }
 
@@ -119,10 +110,13 @@ class MDCCheckboxFoundation extends MDCFoundation {
    * Handles the animationend event for the checkbox
    */
   handleAnimationEnd() {
+    if (!this.enableAnimationEndHandler_) return;
+
     clearTimeout(this.animEndLatchTimer_);
+
     this.animEndLatchTimer_ = setTimeout(() => {
       this.adapter_.removeClass(this.currentAnimationClass_);
-      this.adapter_.deregisterAnimationEndHandler(this.animEndHandler_);
+      this.enableAnimationEndHandler_ = false;
     }, numbers.ANIM_END_LATCH_MS);
   }
 
@@ -200,7 +194,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
     // to the DOM.
     if (this.adapter_.isAttachedToDOM() && this.currentAnimationClass_.length > 0) {
       this.adapter_.addClass(this.currentAnimationClass_);
-      this.adapter_.registerAnimationEndHandler(this.animEndHandler_);
+      this.enableAnimationEndHandler_ = true;
     }
   }
 
@@ -265,6 +259,8 @@ class MDCCheckboxFoundation extends MDCFoundation {
       this.adapter_.setNativeControlAttr(
         strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
     } else {
+      // The on/off state does not need to keep track of aria-checked, since
+      // the screenreader uses the checked property on the checkbox element.
       this.adapter_.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);
     }
   }

packages/mdc-checkbox/index.js

@@ -56,6 +56,17 @@ class MDCCheckbox extends MDCComponent {
 
     /** @private {!MDCRipple} */
     this.ripple_ = this.initRipple_();
+    /** @private {!Function} */
+    this.handleChange_;
+    /** @private {!Function} */
+    this.handleAnimationEnd_;
+  }
+
+  initialSyncWithDOM() {
+    this.handleChange_ = () => this.foundation_.handleChange();
+    this.handleAnimationEnd_= () => this.foundation_.handleAnimationEnd();
+    this.nativeCb_.addEventListener('change', this.handleChange_);
+    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
   }
 
   /**
@@ -81,12 +92,6 @@ class MDCCheckbox extends MDCComponent {
       removeClass: (className) => this.root_.classList.remove(className),
       setNativeControlAttr: (attr, value) => this.nativeCb_.setAttribute(attr, value),
       removeNativeControlAttr: (attr) => this.nativeCb_.removeAttribute(attr),
-      registerAnimationEndHandler:
-        (handler) => this.root_.addEventListener(getCorrectEventName(window, 'animationend'), handler),
-      deregisterAnimationEndHandler:
-        (handler) => this.root_.removeEventListener(getCorrectEventName(window, 'animationend'), handler),
-      registerChangeHandler: (handler) => this.nativeCb_.addEventListener('change', handler),
-      deregisterChangeHandler: (handler) => this.nativeCb_.removeEventListener('change', handler),
       getNativeControl: () => this.nativeCb_,
       isIndeterminate: () => this.isIndeterminate_(),
       isChecked: () => this.isChecked_(),
@@ -160,6 +165,8 @@ class MDCCheckbox extends MDCComponent {
 
   destroy() {
     this.ripple_.destroy();
+    this.nativeCb_.removeEventListener('change', this.handleChange_);
+    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
     super.destroy();
   }
 }