Merge branch 'master' into drawer_open_close_open

material-components · Nov 14, 2018 · 5bec8d2 · 5bec8d2
2 parents 297fc7e + c640d50
commit 5bec8d2
Show file tree

Hide file tree

Showing 64 changed files with 233 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+<a name="0.41.1"></a>
+## [0.41.1](https://github.com/material-components/material-components-web/compare/v0.41.0...v0.41.1) (2018-11-14)
+
+
+### Bug Fixes
+
+* **card:** Corrected baseline shape value of card small => medium ([#4060](https://github.com/material-components/material-components-web/issues/4060)) ([875b159](https://github.com/material-components/material-components-web/commit/875b159))
+* **drawer:** allow drawer below top app bar ([#4028](https://github.com/material-components/material-components-web/issues/4028)) ([1eff602](https://github.com/material-components/material-components-web/commit/1eff602))
+* **drawer:** Fix issue where drawer fires opened event twice. ([#4027](https://github.com/material-components/material-components-web/issues/4027)) ([4a5a8e2](https://github.com/material-components/material-components-web/commit/4a5a8e2))
+
+
+
 <a name="0.41.0"></a>
 # [0.41.0](https://github.com/material-components/material-components-web/compare/v0.40.0...v0.41.0) (2018-10-29)
 

diff --git a/README.md b/README.md
@@ -1,5 +1,3 @@
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 [![Version](https://img.shields.io/npm/v/material-components-web.svg)](https://www.npmjs.com/package/material-components-web)
 [![Build Status](https://travis-ci.com/material-components/material-components-web.svg?branch=master)](https://travis-ci.com/material-components/material-components-web/)
 [![codecov](https://codecov.io/gh/material-components/material-components-web/branch/master/graph/badge.svg)](https://codecov.io/gh/material-components/material-components-web)

diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "lerna": "2.0.0-beta.36",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "commands": {
     "publish": {
       "ignore": [

diff --git a/packages/material-components-web/README.md b/packages/material-components-web/README.md
@@ -1,5 +1,3 @@
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Material Components Web (MDC Web)
 
 This package contains the master library for Material Components Web. It simply wraps all of its

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "material-components-web",
   "description": "Modular and customizable Material Design UI components for the web",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "license": "MIT",
   "keywords": [
     "material components",
@@ -17,12 +17,12 @@
     "@material/auto-init": "^0.41.0",
     "@material/base": "^0.41.0",
     "@material/button": "^0.41.0",
-    "@material/card": "^0.41.0",
+    "@material/card": "^0.41.1",
     "@material/checkbox": "^0.41.0",
     "@material/chips": "^0.41.0",
     "@material/dialog": "^0.41.0",
     "@material/dom": "^0.41.0",
-    "@material/drawer": "^0.41.0",
+    "@material/drawer": "^0.41.1",
     "@material/elevation": "^0.41.0",
     "@material/fab": "^0.41.0",
     "@material/floating-label": "^0.41.0",

diff --git a/packages/mdc-animation/README.md b/packages/mdc-animation/README.md
@@ -7,8 +7,6 @@ iconId: animation
 path: /catalog/animation/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Animation
 
 Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.

diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
@@ -6,8 +6,6 @@ excerpt: "Utilities for declarative, DOM-based initialization of components on s
 path: /catalog/auto-init/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Auto Init
 
 `mdc-auto-init` is a utility package that provides declarative, DOM-based method of initialization

diff --git a/packages/mdc-base/README.md b/packages/mdc-base/README.md
@@ -6,8 +6,6 @@ excerpt: "Base foundation and component classes."
 path: /catalog/base/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Base
 
 MDC Base contains core foundation and component classes that serve as the base classes for all of MDC Web's foundation classes and components (respectively).

diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
@@ -7,8 +7,6 @@ iconId: button
 path: /catalog/buttons/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Buttons
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md
@@ -7,8 +7,6 @@ iconId: card
 path: /catalog/cards/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Cards
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-card/package.json b/packages/mdc-card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/card",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "description": "The Material Components for the web card component",
   "license": "MIT",
   "keywords": [

diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md
@@ -7,8 +7,6 @@ iconId: selection_control
 path: /catalog/input-controls/checkboxes/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Checkboxes
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
@@ -7,8 +7,6 @@ iconId: chip
 path: /catalog/chips/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Chips
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -7,8 +7,6 @@ iconId: dialog
 path: /catalog/dialogs/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Dialog
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-dom/README.md b/packages/mdc-dom/README.md
@@ -6,8 +6,6 @@ excerpt: "Provides commonly-used utilities for inspecting, traversing, and manip
 path: /catalog/dom/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # DOM
 
 MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.

diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
@@ -7,8 +7,6 @@ iconId: side_navigation
 path: /catalog/drawers/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Drawers
 
 The MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.

diff --git a/packages/mdc-drawer/package.json b/packages/mdc-drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/drawer",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "description": "The Material Components Web drawer component",
   "license": "MIT",
   "keywords": [

diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md
@@ -7,8 +7,6 @@ iconId: shadow
 path: /catalog/elevation/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Elevation
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
@@ -7,8 +7,6 @@ iconId: button
 path: /catalog/buttons/floating-action-buttons/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Floating Action Button
 
 <!--<div class="article__asset">
@@ -131,7 +129,8 @@ Mixin | Description
 `mdc-fab-ink-color($color)` | Sets the ink color to the given color
 `mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.
 `mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.
-`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to all FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
+`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
+`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 
 The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.
 

diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss
@@ -89,15 +89,13 @@
 }
 
 @mixin mdc-fab-shape-radius($radius, $rtl-reflexive: false) {
-  @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-height, $radius), $rtl-reflexive);
-
-  &.mdc-fab--mini {
-    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-mini-height, $radius), $rtl-reflexive);
+  &:not(.mdc-fab--extended) {
+    @include mdc-shape-radius($radius, $rtl-reflexive);
   }
+}
 
-  &.mdc-fab--extended {
-    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-extended-height, $radius), $rtl-reflexive);
-  }
+@mixin mdc-fab-extended-shape-radius($radius, $rtl-reflexive: false) {
+  @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-extended-height, $radius), $rtl-reflexive);
 }
 
 $mdc-fab-icon-enter-delay_: 90ms;
@@ -174,6 +172,7 @@ $mdc-fab-icon-enter-duration_: 180ms;
 
 @mixin mdc-fab--extended_ {
   @include mdc-typography(button);
+  @include mdc-fab-extended-shape-radius(50%);
   @include mdc-fab-extended-padding(
     $mdc-fab-extended-icon-padding,
     $mdc-fab-extended-label-padding);

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
@@ -6,8 +6,6 @@ excerpt: "An animated text caption for a Text Field or Select."
 path: /catalog/input-controls/floating-label/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Floating Label
 
 Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.

diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md
@@ -5,8 +5,6 @@ section: components
 path: /catalog/input-controls/form-fields/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Form Fields
 
 MDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.
@@ -82,7 +80,7 @@ By default, the input will be positioned before the label. You can position the
 
 Property | Value Type | Description
 --- | --- | ---
-`input` | String | Gets and sets the form field input.
+`input` | String | Gets and sets the form field input. 
 
 In order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.
 

diff --git a/packages/mdc-grid-list/README.md b/packages/mdc-grid-list/README.md
@@ -7,8 +7,6 @@ iconId: card
 path: /catalog/grid-lists/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 ## Important - Deprecation Notice
 
 The existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality

diff --git a/packages/mdc-icon-button/README.md b/packages/mdc-icon-button/README.md
@@ -6,8 +6,6 @@ iconId: button
 path: /catalog/buttons/icon-buttons/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Icon Buttons
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-icon-toggle/README.md b/packages/mdc-icon-toggle/README.md
@@ -6,8 +6,6 @@ iconId: button
 path: /catalog/buttons/icon-toggle-buttons/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 ## Important - Deprecation Notice
 
 The existing `MDCIconToggle` component and styles will be removed in a future release. Some of its functionality

diff --git a/packages/mdc-image-list/README.md b/packages/mdc-image-list/README.md
@@ -7,8 +7,6 @@ iconId: card
 path: /catalog/image-lists/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Image List
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-layout-grid/README.md b/packages/mdc-layout-grid/README.md
@@ -7,8 +7,6 @@ iconId: responsive_layout
 path: /catalog/layout-grid/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Layout Grid
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-line-ripple/README.md b/packages/mdc-line-ripple/README.md
@@ -6,8 +6,6 @@ excerpt: "The line ripple is used to highlight user-specified input above it."
 path: /catalog/input-controls/line-ripple/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Line Ripple
 
 The line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.

diff --git a/packages/mdc-linear-progress/README.md b/packages/mdc-linear-progress/README.md
@@ -7,8 +7,6 @@ iconId: progress_linear
 path: /catalog/linear-progress/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Linear Progress
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
@@ -7,8 +7,6 @@ iconId: list
 path: /catalog/lists/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Lists
 
 <!--<div class="article__asset">
@@ -273,10 +271,10 @@ within the list component. You should not add `tabindex` to any of the `li` elem
 As the user navigates through the list, any `button` and `a` elements within the list will receive `tabindex="-1"` when
 the list item is not focused. When the list item receives focus, the aforementioned 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
+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 a list
 item. The MDCList will perform the following actions for each key press. Since list interaction will toggle a radio
-button or checkbox within the list item, the list will not toggle `tabindex` for those elements.
+button or checkbox within the list item, the list will not toggle `tabindex` for those elements. 
 
 Key | Action
 --- | ---

diff --git a/packages/mdc-menu-surface/README.md b/packages/mdc-menu-surface/README.md
@@ -7,8 +7,6 @@ iconId: menu
 path: /catalog/menu-surface/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Menu Surface
 
 <!--<div class="article__asset">

diff --git a/packages/mdc-menu/README.md b/packages/mdc-menu/README.md
@@ -7,8 +7,6 @@ iconId: menu
 path: /catalog/menus/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Menus
 
 <!--<div class="article__asset">
@@ -194,6 +192,7 @@ Property | Value Type | Description
 `open` | Boolean | Proxies to the menu surface's `open` property.
 `items` | Array<Element> | Proxies to the list to query for all `.mdc-list-item` elements.
 `quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.
+`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.
 
 Method Signature | Description
 --- | ---

diff --git a/packages/mdc-menu/index.js b/packages/mdc-menu/index.js
@@ -99,6 +99,16 @@ class MDCMenu extends MDCComponent {
     this.menuSurface_.open = value;
   }
 
+  /** @return {boolean} */
+  get wrapFocus() {
+    return this.list_.wrapFocus;
+  }
+
+  /** @param {boolean} value */
+  set wrapFocus(value) {
+    this.list_.wrapFocus = value;
+  }
+
   /**
    * @param {!Corner} corner Default anchor corner alignment of top-left
    *     menu corner.

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
@@ -7,8 +7,6 @@ iconId: text_field
 path: /catalog/input-controls/notched-outline/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Notched Outline
 
 The notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.

diff --git a/packages/mdc-radio/README.md b/packages/mdc-radio/README.md
@@ -6,8 +6,6 @@ iconId: radio_button
 path: /catalog/input-controls/radio-buttons/
 -->
 
-> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
-
 # Radio Buttons
 
 <!--<div class="article__asset">