Merge branch 'master' into fix/checkbox/update-event-listener-management

.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-list/README.md

@@ -50,8 +50,8 @@ npm install @material/list
 
 ### Two-Line List
 
-You can use the `mdc-list--two-line` combined with some extra markup around the text to style a list 
-in the double line list style as defined by 
+You can use the `mdc-list--two-line` combined with some extra markup around the text to style a list
+in the double line list style as defined by
 [the spec](https://material.io/design/components/lists.html#specs) (see "Double line").
 
 ```html
@@ -133,8 +133,8 @@ OR
 
 ### Single Selection List
 
-MDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an 
-single list item to become selected and any other previous selected element to become deselected. 
+MDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an
+single list item to become selected and any other previous selected element to become deselected.
 
 ```html
 <ul id="my-list" class="mdc-list" aria-orientation="vertical">
@@ -223,7 +223,7 @@ The MDCList JavaScript component implements the WAI-ARIA best practices for
 within the list component. You should not add `tabindex` to any of the `li` elements in a list.
 
 As the user navigates through the list, any `button` or `a` elements within the list will receive `tabindex="-1"`
-when the list item is not focused. When the list item receives focus, the child `button` and `a` elements will 
+when the list item is not focused. When the list item receives focus, the child `button` and `a` elements will
 receive `tabIndex="0"`. This allows for the user to tab through list item elements and then tab to the
 first element after the list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements.
 If `singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect
@@ -254,7 +254,7 @@ The default component requires that every list item receives a `tabindex` value
 (`li` elements cannot receive focus at all without a `tabindex` value). Any element not already containing a
 `tabindex` attribute will receive `tabindex=-1`. The first list item should have `tabindex="0"` so that the
 user can find the first element using the `tab` key, but subsequent `tab` keys strokes will cause focus to
-skip over the entire list. If the list items contain sub-elements that are focusable (`button` or `a` elements), 
+skip over the entire list. If the list items contain sub-elements that are focusable (`button` or `a` elements),
 these should also receive `tabIndex="-1"`.
 
 ```html
@@ -268,9 +268,9 @@ these should also receive `tabIndex="-1"`.
 #### Setup in `singleSelection()`
 
 When implementing a component that will use the single selection variant, the HTML should be modified to include
-the `aria-selected` attribute, the `mdc-list-item--selected` or `mdc-list-item--activated` class should be added, 
-and the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated 
-to `-1`. The foundation method `setSelectedIndex()` should be called with the initially selected element immediately 
+the `aria-selected` attribute, the `mdc-list-item--selected` or `mdc-list-item--activated` class should be added,
+and the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated
+to `-1`. The foundation method `setSelectedIndex()` should be called with the initially selected element immediately
 after the foundation is instantiated.
 
 ```html
@@ -280,7 +280,7 @@ after the foundation is instantiated.
   <li class="mdc-list-item" tabindex="-1">Single-line item</li>
 </ul>
 ```
- 
+
 ### `MDCListAdapter`
 
 Method Signature | Description
@@ -293,19 +293,20 @@ Method Signature | Description
 `removeClassForElementIndex(index: Number, className: String) => void` | Removes the `className` class to the list item at `index`.
 `focusItemAtIndex(index: Number) => void` | Focuses the list item at the `index` value specified.
 `setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child `button` and `a` element in the list item at the `index` specified.
+`followHref(element: Element) => void` | If the given element has an href, follows the link.
 
 ### `MDCListFoundation`
 
 Method Signature | Description
 --- | ---
-`setWrapFocus(value: Boolean) => void` | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa. 
-`setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used. 
-`setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item. 
-`setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`. 
+`setWrapFocus(value: Boolean) => void` | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa.
+`setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used.
+`setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item.
+`setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`.
 `setUseActivated(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class.
-`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus. 
+`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus.
 `handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` elements when a list item loses focus.
-`handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered. 
+`handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.
 `handleClick(evt: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.
 `focusNextElement(index: Number) => void` | Handles focusing the next element using the current `index`.
 `focusPrevElement(index: Number) => void` | Handles focusing the previous element using the current `index`.

packages/mdc-list/adapter.js

@@ -91,6 +91,12 @@ class MDCListAdapter {
    * @param {number} tabIndexValue
    */
   setTabIndexForListItemChildren(listItemIndex, tabIndexValue) {}
+
+  /**
+   * If the given element has an href, follows the link.
+   * @param {!Element} ele
+   */
+  followHref(ele) {}
 }
 
 export default MDCListAdapter;

packages/mdc-list/foundation.js

@@ -55,6 +55,7 @@ class MDCListFoundation extends MDCFoundation {
       focusItemAtIndex: () => {},
       isListItem: () => {},
       setTabIndexForListItemChildren: () => {},
+      followHref: () => {},
     });
   }
 
@@ -203,6 +204,9 @@ class MDCListFoundation extends MDCFoundation {
       // Check if the space key was pressed on the list item or a child element.
       if (this.adapter_.isListItem(evt.target)) {
         this.setSelectedIndex(currentIndex);
+
+        // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them
+        this.adapter_.followHref(evt.target);
       }
     }
   }

packages/mdc-list/index.js

@@ -173,6 +173,11 @@ class MDCList extends MDCComponent {
         const listItemChildren = [].slice.call(element.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS));
         listItemChildren.forEach((ele) => ele.setAttribute('tabindex', tabIndexValue));
       },
+      followHref: (ele) => {
+        if (ele.href) {
+          ele.click();
+        }
+      },
     })));
   }
 }

packages/mdc-theme/README.md

@@ -179,3 +179,15 @@ Params:
 @debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)
 @debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)
 ```
+#### `mdc-theme-text-emphasis($emphasis)`
+
+Returns opacity value for given emphasis.
+
+Params:
+
+- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.
+
+```scss
+@debug mdc-theme-text-emphasis(high); // .87
+@debug mdc-theme-text-emphasis(disabled); // .38
+```

packages/mdc-theme/_variables.scss

@@ -62,6 +62,12 @@ $mdc-theme-text-colors: (
   )
 ) !default;
 
+$mdc-theme-text-emphasis: (
+  high: .87,
+  medium: .6,
+  disabled: .38,
+);
+
 @function mdc-theme-ink-color-for-fill_($text-style, $fill-color) {
   $contrast-tone: mdc-theme-contrast-tone($fill-color);
 
@@ -144,3 +150,7 @@ $mdc-theme-property-values: (
 @function mdc-theme-is-valid-theme-prop-value_($style) {
   @return type-of($style) == "color" or $style == "currentColor" or str_slice($style, 1, 4) == "var(";
 }
+
+@function mdc-theme-text-emphasis($emphasis) {
+  @return map-get($mdc-theme-text-emphasis, $emphasis);
+}

test/unit/mdc-list/foundation.test.js

@@ -44,7 +44,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCListFoundation, [
     'getListItemCount', 'getFocusedElementIndex', 'getListItemIndex', 'setAttributeForElementIndex',
     'removeAttributeForElementIndex', 'addClassForElementIndex', 'removeClassForElementIndex',
-    'focusItemAtIndex', 'isListItem', 'setTabIndexForListItemChildren',
+    'focusItemAtIndex', 'isListItem', 'setTabIndexForListItemChildren', 'followHref',
   ]);
 });