Merge branch 'master' into experimental/select-fewer-adapter-apis

demos/list.scss

@@ -20,6 +20,7 @@
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-list/mdc-list";
 @import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-typography/mixins";
 
 a.material-icons {
   text-decoration: none;

docs/open_source/release-process.md

@@ -128,26 +128,13 @@ git commit -am "chore: Publish"
 
 ### For Pre-Releases and Patch Releases
 
-Simply run the post-release script to update and commit the changelog and apply an annotated vX.Y.Z git tag:
-
-```
-./scripts/post-release.sh
-```
-
-Make sure that a CHANGELOG commit actually appears in your `git log`! If you need to retry the process:
-
-```
-git tag -d <tag> # Delete the tag that the script created
-git reset --hard HEAD^ # Rewind to the previous commit
-```
-
-Alternatively, if you would like to be extra sure of the changelog, you can generate it manually prior to running the
-post-release script, in which case it will skip `npm run changelog` and commit your local changes:
+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
+./scripts/post-release.sh # This will commit the changelog diff and then create a tag
 ```
 
 ### For Minor Releases
@@ -188,13 +175,13 @@ You will need to temporarily alter Github's master branch protection in order to
 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 Feature/Breaking-Change Releases
+### For Pre-releases and Minor Releases
 
 `git push origin master && git push origin <tag>`
 
 This will ensure the new commits *and* tag are pushed to the remote git repository.
 
-### For Bugfix Releases
+### For Patch Releases
 
 `git push origin <tag>`
 
@@ -212,13 +199,27 @@ git push
 
 ## Update and Deploy Catalog Repository
 
-We maintain a `next` branch on the MDC Web Catalog repository to keep ahead of breaking changes in new releases.
+### For Patch Releases
+
+1. Update the `material-components-web` dependency in the catalog's `package.json` to the new patch version
+1. Run `npm start` and glance through the catalog pages to make sure everything looks normal
+1. Send a PR for the dependency update, then run `npm deploy` once it's merged to master
+
+### For Minor Releases
+
+We typically maintain a `next` branch on the MDC Web Catalog repository which follows MDC Web pre-releases, to keep
+ahead of breaking changes in new releases.
+
+In the event no pre-releases were tagged, the above process for patch releases would be followed, but would require
+checking for necessary updates to accommodate breaking changes in MDC Web.
+
+Below is the process when a `next` branch is used:
 
 1. Ensure you have the latest `master` checked out: `git checkout master && git pull`
 1. Create a new branch, e.g.: `git checkout -b chore/0.36.0`
 1. Merge `next` into the branch: `git merge next`
 1. Deal with any conflicts if necessary
-1. Update `package.json` to reference the newly-released final versions of MDC Web packages
+1. Update `package.json` to reference the newly-released minor version of `material-components-web`
 1. `rm -rf node_modules && npm i` to cause `package-lock.json` to update
 1. `npm start` and test the catalog, in case any further breaking changes occurred since the last pre-release
 1. `npm run build` to double-check that there are no unforeseen errors when building resources for deployment

karma.conf.js

@@ -20,17 +20,15 @@ const webpackConfig = require('./webpack.config')[0];
 const USING_TRAVISCI = Boolean(process.env.TRAVIS);
 const USING_SL = Boolean(process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY);
 
-const SL_LAUNCHERS = {
-  /*
-   * Chrome (headless)
-   */
-
+const LOCAL_LAUNCHERS = {
+  /** See https://github.com/travis-ci/travis-ci/issues/8836#issuecomment-348248951 */
   'ChromeHeadlessNoSandbox': {
     base: 'ChromeHeadless',
-    // See https://github.com/travis-ci/travis-ci/issues/8836#issuecomment-348248951
     flags: ['--no-sandbox'],
   },
+};
 
+const SAUCE_LAUNCHERS = {
   /*
    * Chrome (desktop)
    */
@@ -136,6 +134,9 @@ const SL_LAUNCHERS = {
   // },
 };
 
+const getLaunchers = () => USING_SL ? SAUCE_LAUNCHERS : LOCAL_LAUNCHERS;
+const getBrowsers = () => Object.keys(getLaunchers());
+
 module.exports = function(config) {
   config.set({
     basePath: '',
@@ -150,12 +151,12 @@ module.exports = function(config) {
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
-    browsers: determineBrowsers(),
+    browsers: getBrowsers(),
     browserDisconnectTimeout: 40000,
     browserNoActivityTimeout: 120000,
     captureTimeout: 240000,
     concurrency: USING_SL ? 4 : Infinity,
-    customLaunchers: SL_LAUNCHERS,
+    customLaunchers: getLaunchers(),
 
     coverageReporter: {
       dir: 'coverage',
@@ -200,23 +201,26 @@ module.exports = function(config) {
     },
   });
 
-  // See https://github.com/karma-runner/karma-sauce-launcher/issues/73
-  if (USING_TRAVISCI) {
-    config.set({
-      sauceLabs: {
+  if (USING_SL) {
+    const sauceLabsConfig = {
+      username: process.env.SAUCE_USERNAME,
+      accessKey: process.env.SAUCE_ACCESS_KEY,
+    };
+
+    if (USING_TRAVISCI) {
+      // See https://github.com/karma-runner/karma-sauce-launcher/issues/73
+      Object.assign(sauceLabsConfig, {
         testName: 'Material Components Web Unit Tests - CI',
         tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
-        username: process.env.SAUCE_USERNAME,
-        accessKey: process.env.SAUCE_ACCESS_KEY,
         startConnect: false,
-      },
+      });
+    }
+
+    config.set({
+      sauceLabs: sauceLabsConfig,
       // Attempt to de-flake Sauce Labs tests on TravisCI.
       transports: ['polling'],
       browserDisconnectTolerance: 3,
     });
   }
 };
-
-function determineBrowsers() {
-  return USING_SL ? Object.keys(SL_LAUNCHERS) : ['ChromeHeadlessNoSandbox'];
-}

packages/mdc-list/README.md

@@ -58,31 +58,27 @@ in the double line list style as defined by
 <ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
   <li class="mdc-list-item">
     <span class="mdc-list-item__text">
-      First-line text
-      <span class="mdc-list-item__secondary-text">
-        Second-line text
-      </span>
+      <span class="mdc-list-item__primary-text">First-line text</span>
+      <span class="mdc-list-item__secondary-text">Second-line text</span>
     </span>
   </li>
   <li class="mdc-list-item">
     <span class="mdc-list-item__text">
-      First-line text
-      <span class="mdc-list-item__secondary-text">
-        Second-line text
-      </span>
+      <span class="mdc-list-item__primary-text">First-line text</span>
+      <span class="mdc-list-item__secondary-text">Second-line text</span>
     </span>
   </li>
   <li class="mdc-list-item">
     <span class="mdc-list-item__text">
-      First-line text
-      <span class="mdc-list-item__secondary-text">
-        Second-line text
-      </span>
+      <span class="mdc-list-item__primary-text">First-line text</span>
+      <span class="mdc-list-item__secondary-text">Second-line text</span>
     </span>
   </li>
 </ul>
 ```
 
+> NOTE: Make sure that there are no white-space characters before primary and secondary text.
+
 ### List Groups
 
 Multiple related lists can be grouped together using the `mdc-list-group` class on a containing element.
@@ -185,7 +181,8 @@ CSS Class | Description
 `mdc-list--avatar-list` | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger.
 `mdc-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines).
 `mdc-list-item` | Mandatory, for the list item element.
-`mdc-list-item__text` |	Optional, primary text for the row (displayed as middle column of the list item).
+`mdc-list-item__text` |	Optional, wrapper for two line list item text content (displayed as middle column of the list item).
+`mdc-list-item__primary-text` | Optional, primary text for the list item. Should be the child of `mdc-list-item__text`.
 `mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`.
 `mdc-list-item--selected` | Optional, styles the row in an selected* state.
 `mdc-list-item--activated` | Optional, styles the row in an activated* state.

packages/mdc-list/mdc-list.scss

@@ -94,23 +94,46 @@
   @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
 }
 
-.mdc-list-item__text,
-.mdc-list-item__secondary-text {
+.mdc-list-item__text {
   @include mdc-typography-overflow-ellipsis;
 
+  align-self: flex-start;
+}
+
+$mdc-list-item-primary-text-baseline-height_: 32px;
+$mdc-list-item-secondary-text-baseline-height_: 20px;
+$mdc-list-dense-item-primary-text-baseline-height_: 24px;
+
+.mdc-list-item__primary-text {
+  @include mdc-typography-overflow-ellipsis;
+  @include mdc-typography-baseline-top($mdc-list-item-primary-text-baseline-height_);
+  @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);
+
   display: block;
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list--dense & {
+    @include mdc-typography-baseline-top($mdc-list-dense-item-primary-text-baseline-height_);
+    @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);
+  }
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-list-item__secondary-text {
   @include mdc-typography(body2);
-}
+  @include mdc-typography-overflow-ellipsis;
+  @include mdc-typography-baseline-top($mdc-list-item-secondary-text-baseline-height_);
 
-// Match the font size to the primary text when dense
-// stylelint-disable plugin/selector-bem-pattern
-.mdc-list--dense .mdc-list-item__secondary-text {
-  font-size: inherit;
+  display: block;
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list--dense & {
+    @include mdc-typography-baseline-top($mdc-list-item-secondary-text-baseline-height_);
+
+    font-size: inherit;
+  }
+  // stylelint-enable plugin/selector-bem-pattern
 }
-// stylelint-enable plugin/selector-bem-pattern
 
 // stylelint-disable plugin/selector-bem-pattern
 .mdc-list--dense .mdc-list-item {
@@ -140,7 +163,7 @@
 }
 
 .mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
-  height: 48px;
+  height: 60px;
 }
 
 .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic {

test/screenshot/infra/commands/build.js

@@ -55,8 +55,8 @@ class BuildCommand {
 
     this.logger_.foldStart('screenshot.build', 'Compiling source files');
 
-    this.buildProtoFiles_(shouldWatch);
-    this.buildHtmlFiles_(shouldWatch);
+    await this.buildProtoFiles_(shouldWatch);
+    await this.buildHtmlFiles_(shouldWatch);
 
     if (shouldWatch) {
       this.processManager_.spawnChildProcess('npm', ['run', 'screenshot:webpack', '--', '--watch']);
@@ -71,12 +71,12 @@ class BuildCommand {
    * @param {boolean} shouldWatch
    * @private
    */
-  buildProtoFiles_(shouldWatch) {
-    const buildRightNow = () => this.protoCommand_.runAsync();
+  async buildProtoFiles_(shouldWatch) {
+    const buildRightNow = async () => this.protoCommand_.runAsync(shouldWatch);
     const buildDelayed = debounce(buildRightNow, 1000);
 
     if (!shouldWatch) {
-      buildRightNow();
+      await buildRightNow();
       return;
     }
 
@@ -93,12 +93,12 @@ class BuildCommand {
    * @param {boolean} shouldWatch
    * @private
    */
-  buildHtmlFiles_(shouldWatch) {
-    const buildRightNow = () => this.indexCommand_.runAsync();
+  async buildHtmlFiles_(shouldWatch) {
+    const buildRightNow = async () => this.indexCommand_.runAsync();
     const buildDelayed = debounce(buildRightNow, 1000);
 
     if (!shouldWatch) {
-      buildRightNow();
+      await buildRightNow();
       return;
     }
 

test/screenshot/infra/commands/proto.js

@@ -24,9 +24,10 @@ const {TEST_DIR_RELATIVE_PATH} = require('../lib/constants');
 
 class ProtoCommand {
   /**
+   * @param {boolean} isWatching
    * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
    */
-  async runAsync() {
+  async runAsync(isWatching = false) {
     const processManager = new ProcessManager();
     const protoFilePaths = glob.sync(path.join(TEST_DIR_RELATIVE_PATH, '**/*.proto'));
 
@@ -35,7 +36,9 @@ class ProtoCommand {
 
     for (const protoFilePath of protoFilePaths) {
       const jsFilePath = protoFilePath.replace(/.proto$/, '.pb.js');
-      processManager.spawnChildProcessSync(cmd, args.concat(`--out=${jsFilePath}`, protoFilePath));
+      processManager.spawnChildProcessSync(
+        cmd, args.concat(`--out=${jsFilePath}`, protoFilePath), undefined, isWatching
+      );
     }
   }
 }

test/screenshot/infra/lib/cloud-storage.js

@@ -85,28 +85,18 @@ class CloudStorage {
       return;
     }
 
-    console.log(`\nUploading ${noun} to GCS...\n`);
-
-    /** @type {!ChildProcessSpawnResult} */
-    const gsutilProcess = await this.spawnGsutilUploadProcess_(reportData, localSourceDir);
-
-    /** @type {number} */
-    const exitCode = gsutilProcess.status;
-
+    console.log(`Uploading ${noun} to GCS...\n`);
+    this.spawnGsutilUploadProcess_(reportData, localSourceDir);
     console.log('');
-
-    if (exitCode !== 0) {
-      throw new Error(`gsutil processes exited with code ${exitCode}`);
-    }
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
    * @param {string} localSourceDir
-   * @return {!Promise<!ChildProcessSpawnResult>}
+   * @return {!SpawnSyncReturns}
    * @private
    */
-  async spawnGsutilUploadProcess_(reportData, localSourceDir) {
+  spawnGsutilUploadProcess_(reportData, localSourceDir) {
     const removeTrailingSlash = (filePath) => filePath.replace(new RegExp('/+$'), '');
 
     // Normalize directory paths by removing trailing slashes