Merge branch 'master' into set-analytics-acct

docs/_assets/components.css

@@ -2,6 +2,44 @@
   display: flex;
 }
 
+.mdl-components-img {
+  max-width: 100%;
+  height: auto;
+  width: auto; /* for ie9 */
+}
+
+.mdl-components-text {
+  margin: 0;
+  padding: 0;
+}
+
+mdl-components-dl {
+  padding: 0.5em;
+  width: 80%;
+}
+
+mdl-components-dt {
+  float: left;
+  clear: left;
+  width: 150px;
+  font-weight: bold;
+}
+
+mdl-components-dd {
+  margin: 0 0 0 150px;
+  padding: 0 0 0.5em 0;
+}
+
+.mdl-components__nav .mdl-components__link:first-of-type {
+  /* The first component category is a virtual category used to display
+   * the index page of component categories. As such, we hide navigation
+   * of the index category using CSS display:none. Navigation is not
+   * needed because we display the index page by default when accessing
+   * the components tab.
+   */
+  display: none;
+}
+
 .mdl-components .mdl-components__nav {
   display: inline-block;
   background: #fff;

docs/_assets/customizer.css

@@ -113,4 +113,5 @@
   margin-left: auto;
   margin-right: auto;
   max-width: 1280px;
+  margin-bottom: 80px;
 }

docs/_assets/main.css

@@ -276,7 +276,7 @@ body:not(.about) .mdl-navigation__link.download > button {
 .about-panel--text dl dt {
   text-align: right;
   vertical-align: top;
-  width: 160px;
+  display: inline-table;
   margin-right: 24px;
   line-height: 2em;
 }
@@ -1167,18 +1167,3 @@ code[class*=language-], pre[class*=language-] {
 .docs-navigation .spacer {
   flex-grow: 1;
 }
-
-.docs-wip-banner {
-  position: fixed;
-  z-index: 999;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #B71C1C;
-  color: white;
-  font-size: 12px;
-  padding: 16px 40px;
-}
-.docs-banner em {
-  font-style: italic;
-}

docs/_assets/main.js

@@ -30,17 +30,3 @@
   leftScroll.addEventListener('click', scrollMenuBar.bind(null, -delta));
   leftScroll.addEventListener('tap', scrollMenuBar.bind(null, -delta));
 })();
-
-// WIP banner
-(function() {
-  'use strict';
-
-  var banner = document.querySelector('.docs-wip-banner');
-  if ((location.hostname !== 'localhost') &&
-      (location.hostname !== 'storage.googleapis.com')) {
-    banner.style.display = 'block';
-  }
-  if (location.search.indexOf('showbanner') !== -1) {
-    banner.style.display = 'block';
-  }
-})();

docs/_pages/components.md

@@ -4,6 +4,9 @@ title: Components
 bodyclass: components
 include_prefix: ../
 categories:
+  - name: index 
+    components:
+      - name: index  
   - name: badges
     title: Badges
     description: Small status descriptors for UI elements.
@@ -69,17 +72,13 @@ categories:
           - snippet_group:
             - caption: Icon button
               file: icon.html
-            - caption: Raised
-              file: icon-raised.html
             - caption: Colored
-              file: icon-raised-colored.html
+              file: icon-colored.html
           - snippet_group:
             - caption: Mini FAB
               file: fab-mini.html
             - caption: Colored
               file: fab-mini-colored.html
-            - caption: Accent colored
-              file: fab-mini-accent.html
   - name: cards
     title: Cards
     description: Self-contained pieces of paper with data.
@@ -185,4 +184,15 @@ categories:
     components:
       - name: tooltip
         class: mdl-tooltip
+        snippets:
+          - snippet_group:
+            - caption: Simple
+              file: tooltip-simple.html
+            - caption: Large
+              file: tooltip-large.html
+          - snippet_group:
+            - caption: Rich
+              file: tooltip-rich.html
+            - caption: Multiple lines
+              file: tooltip-multiline.html
 ---

docs/_templates/components.html

@@ -81,6 +81,7 @@
             {% include doc ignore missing %}
           </span>
         {%- endfor %}
+        <img class="mdl-components-img" src="/assets/compindex_2x.png">
       </div>
     </section>
     {% if loop.first %}

docs/_templates/layout.html

@@ -103,9 +103,6 @@
       </footer>
     </main>
   </div>
-  <div class="docs-wip-banner" style="display: none;">
-    This is a <em>preview</em> of Material Design Lite. It is still very much work-in-progress. We are launching soon!
-  </div>
 
     <!-- IE Compatibility shims -->
       <!--[if lt IE 9]>

gulpfile.js

@@ -217,11 +217,13 @@ gulp.task('scripts', function () {
     .pipe($.sourcemaps.init())
     // Concatenate Scripts
     .pipe($.concat('material.js'))
-    .pipe($.header(banner, {pkg: pkg}))
     .pipe(gulp.dest('./dist'))
     // Minify Scripts
-    .pipe($.uglify({preserveComments: 'some', sourceRoot: '.',
-        sourceMapIncludeSources: true}))
+    .pipe($.uglify({
+      sourceRoot: '.',
+      sourceMapIncludeSources: true
+    }))
+    .pipe($.header(banner, {pkg: pkg}))
     .pipe($.concat('material.min.js'))
     // Write Source Maps
     .pipe($.sourcemaps.write('./'))
@@ -463,13 +465,47 @@ gulp.task('serve', ['default'], function() {
     .pipe($.open('', {url: 'http://localhost:5000'}));
 });
 
+// Generate release archive containing just JS, CSS, Source Map deps
+gulp.task('zip:mdl', function() {
+  gulp.src(['dist/material.*@(js|css)?(.map)', 'LICENSE', 'bower.json', 'package.json'])
+    .pipe($.zip('mdl.zip'))
+    .pipe(gulp.dest('dist'));
+});
+
+// Generate release archive containing the library, templates and assets
+// for templates. Note that it is intentional for some templates to include
+// a customised version of the material.min.css file for their own needs.
+// Others (e.g the Android template) simply use the default built version of
+// the library.
+
+// Define a filter containing only the build assets we want to pluck from the
+// `dist` stream. This enables us to preserve the correct final dir structure,
+// which was not occurring when simply using `gulp.src` in `zip:templates`
+
+var fileFilter = $.filter([
+  'material.*@(js|css)?(.map)',
+  'templates/**/*.*',
+  'assets/**/*.*',
+  'LICENSE',
+  'bower.json',
+  'package.json']);
+
+gulp.task('zip:templates', function() {
+  // Stream of all `dist` files and other package manager files from root
+  gulp.src(['dist/**/*.*', 'LICENSE', 'bower.json', 'package.json'])
+  .pipe(fileFilter)
+  .pipe($.zip('mdl-templates.zip'))
+  .pipe(fileFilter.restore())
+  .pipe(gulp.dest('dist'));
+});
+
 // Push the latest version of code resources (CSS+JS) to Google Cloud Storage.
 // Public-read objects in GCS are served by a Google provided and supported
 // global, high performance caching/content delivery network (CDN) service.
 // This task requires gsutil to be installed and configured.
 // For info on gsutil: https://cloud.google.com/storage/docs/gsutil.
 //
-gulp.task('publish:code', function() {
+gulp.task('publish:code', ['zip:mdl', 'zip:templates'], function() {
   // Build dest path, info message, cache control and gsutil cmd to copy
   // each object into a GCS bucket. The dest is a version specific path.
   // The gsutil -a option sets the ACL on each object copied.
@@ -485,14 +521,10 @@ gulp.task('publish:code', function() {
   var gsutilCacheCmd = 'gsutil -m setmeta ' + cacheControl + ' ' + dest;
 
   process.stdout.write(infoMsg + '\n');
-  // Build an archive file with the runtime elements.
-  gulp.src('dist/material.*@(js|css)?(.map)')
-    .pipe($.zip('mdl.zip'))
-    .pipe(gulp.dest('dist'));
   // Upload the goodies to a separate GCS bucket with versioning.
   // Using a sep bucket avoids the risk of accidentally blowing away
   // old versions in the microsite bucket.
-  return gulp.src(['dist/material.*@(js|css)?(.map)', 'dist/mdl.zip'],
+  return gulp.src(['dist/material.*@(js|css)?(.map)', 'dist/mdl.zip', 'dist/mdl-templates.zip'],
       {read: false})
     .pipe($.tap(function(file, t) {
       file.base = path.basename(file.path);

package.json

@@ -26,6 +26,7 @@
     "gulp-connect": "^2.2.0",
     "gulp-css-inline-images": "^0.1.1",
     "gulp-csso": "^1.0.0",
+    "gulp-filter": "^2.0.2",
     "gulp-flatten": "0.0.4",
     "gulp-front-matter": "^1.2.2",
     "gulp-gh-pages": "^0.5.0",

src/button/snippets/fab-mini-accent.html

@@ -1,4 +0,0 @@
-<!-- Accent colored mini FAB button -->
-<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--accent">
-  <i class="material-icons">add</i>
-</button>

src/button/snippets/icon-colored.html

@@ -1,4 +1,4 @@
-<!-- Raised icon button -->
-<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised">
+<!-- Colored icon button -->
+<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
   <i class="material-icons">mood</i>
 </button>

src/button/snippets/icon-raised-colored.html

@@ -1,4 +0,0 @@
-<!-- Raised colored icon button -->
-<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised mdl-button--colored">
-  <i class="material-icons">mood</i>
-</button>

src/index/README.md

@@ -0,0 +1,15 @@
+<section class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
+  <dl class="mdl-components-dl">
+    <dt class="mdl-components-dt">COMPONENTS</dt>
+    <dd class="mdl_components-dd">
+Material Design Lite (MDL) is a library of components for web developers 
+based on Google's Material Design Philosophy: "A visual language for our 
+users that synthesizes the classic principles of good design with the 
+innovation and possibility of technology and science." Understanding the 
+goals and principles of Material Design is critical to the proper use of 
+the Material Design Lite components. If you have not yet read the 
+<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a> 
+you should do so before attempting to use the components.
+    </dd>
+  </dl>
+</section>

src/layout/layout.js

@@ -256,10 +256,10 @@ MaterialLayout.prototype.init = function() {
           this.headerTransitionEndHandler.bind(this));
         this.header_.addEventListener('click',
           this.headerClickHandler.bind(this));
-      } else if (this.element_.classList.contains(
+      } else if (this.header_.classList.contains(
           this.CssClasses_.HEADER_SCROLL)) {
         mode = this.Mode_.SCROLL;
-        container.classlist.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+        container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
       }
 
       if (mode === this.Mode_.STANDARD) {

src/tooltip/demo.css

@@ -1,38 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.demo-page--tooltip {
-  padding: 20px;
-  height: 120px;
-}
-
-.demo-page--tooltip .icon {
-  background-color: transparent;
-  border: none;
-  display: inline-block;
-  height: 21px;
-  margin: 0 50px;
-  opacity: 0.7;
-  outline: none;
-  padding: 0;
-  position: relative;
-  width: 21px;
-  font-size: 24px;
-}
-
-.demo-page--tooltip .icon:hover {
-  opacity: 1;
-}

src/tooltip/demo.html

@@ -1,23 +0,0 @@
-  <div class="demo-preview-block demo-page--tooltip">
-
-    <div id="tt1" class="icon material-icons">note_add</div>
-    <div class="mdl-tooltip" for="tt1">
-        Simple tooltip
-    </div>
-
-    <div id="tt2" class="icon material-icons">mood</div>
-    <div class="mdl-tooltip" for="tt2">
-        This is a
-        <strong>rich tooltip</strong>
-    </div>
-
-    <div id="tt3" class="icon material-icons">group</div>
-    <div class="mdl-tooltip" for="tt3">
-        This is an example of a long tooltip that wraps
-    </div>
-
-    <div id="tt4" class="icon material-icons">menu</div>
-    <div class="mdl-tooltip mdl-tooltip--large" for="tt4">
-        Element with a large tooltip
-    </div>
-  </div>

src/tooltip/snippets/tooltip-large.html

@@ -0,0 +1,5 @@
+<!-- Large Tooltip -->
+<div id="tt2" class="icon material-icons">menu</div>
+<div class="mdl-tooltip mdl-tooltip--large" for="tt2">
+Element with a large tooltip
+</div>

src/tooltip/snippets/tooltip-multiline.html

@@ -0,0 +1,5 @@
+<!-- Multiline Tooltip -->
+<div id="tt4" class="icon material-icons">group</div>
+<div class="mdl-tooltip" for="tt4">
+This is an example of a long tooltip that wraps
+</div>

src/tooltip/snippets/tooltip-rich.html

@@ -0,0 +1,5 @@
+<!-- Rich Tooltip -->
+<div id="tt3" class="icon material-icons">mood</div>
+<div class="mdl-tooltip" for="tt3">
+This is a <em>rich tooltip</em>
+</div>

src/tooltip/snippets/tooltip-simple.html

@@ -0,0 +1,5 @@
+<!-- Simple Tooltip -->
+<div id="tt1" class="icon material-icons">note_add</div>
+<div class="mdl-tooltip" for="tt1">
+Simple tooltip
+</div>