Merge branch 'master' into chore/release

material-components · Feb 25, 2020 · fbdd397 · fbdd397
2 parents 191f8fa + 7ec9697
commit fbdd397
Show file tree

Hide file tree

Showing 23 changed files with 349 additions and 299 deletions.
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
@@ -99,10 +99,10 @@ MDC Web:
 
 ```html
 <label class="mdc-text-field">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -126,10 +126,10 @@ element, with the component’s class name as the value. For example:
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 

diff --git a/docs/open_source/rotation.md b/docs/open_source/rotation.md
diff --git a/packages/material-components-web/index.scss b/packages/material-components-web/index.scss
@@ -1 +1 @@
-@use './material-components-web';
+@use "./material-components-web";
diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
@@ -33,10 +33,10 @@ properly.
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 
 <!-- at the bottom of the page -->
@@ -54,10 +54,10 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 

diff --git a/packages/mdc-base/_mixins.scss b/packages/mdc-base/_mixins.scss
@@ -1,4 +1,3 @@
-@use "sass:list";
 //
 // Copyright 2018 Google Inc.
 //
@@ -21,6 +20,8 @@
 // THE SOFTWARE.
 //
 
+@use "sass:list";
+
 // This variable is not intended to be overridden externally; it uses !default to avoid being reset
 // every time this file is imported.
 $styles-emitted_: () !default;

diff --git a/packages/mdc-chips/mdc-chips.scss b/packages/mdc-chips/mdc-chips.scss
@@ -1,4 +1,3 @@
-
 //
 // Copyright 2017 Google Inc.
 //

diff --git a/packages/mdc-layout-grid/_variables.scss b/packages/mdc-layout-grid/_variables.scss
@@ -20,7 +20,7 @@
 
 $breakpoints: (
   desktop: 840px,
-  tablet: 480px,
+  tablet: 600px,
   phone: 0px
 ) !default;
 

diff --git a/packages/mdc-line-ripple/README.md b/packages/mdc-line-ripple/README.md
@@ -32,7 +32,7 @@ npm install @material/line-ripple
 ### HTML Structure
 
 ```html
-<div class="mdc-line-ripple"></div>
+<span class="mdc-line-ripple"></span>
 ```
 
 ### Styles

diff --git a/packages/mdc-line-ripple/test/component.test.ts b/packages/mdc-line-ripple/test/component.test.ts
@@ -28,7 +28,7 @@ import {createMockFoundation} from '../../../testing/helpers/foundation';
 const getFixture = () => {
   const wrapper = document.createElement('div');
   wrapper.innerHTML = `
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   `;
   const el = wrapper.firstElementChild as HTMLElement;
   wrapper.removeChild(el);

diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
@@ -33,13 +33,13 @@ npm install @material/notched-outline
 ### HTML Structure
 
 ```html
-<div class="mdc-notched-outline">
-  <div class="mdc-notched-outline__leading"></div>
-  <div class="mdc-notched-outline__notch">
+<span class="mdc-notched-outline">
+  <span class="mdc-notched-outline__leading"></span>
+  <span class="mdc-notched-outline__notch">
     <span class="mdc-floating-label">Label</span>
-  </div>
-  <div class="mdc-notched-outline__trailing"></div>
-</div>
+  </span>
+  <span class="mdc-notched-outline__trailing"></span>
+</span>
 ```
 
 > Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when

diff --git a/packages/mdc-notched-outline/test/component.test.ts b/packages/mdc-notched-outline/test/component.test.ts
@@ -27,11 +27,11 @@ import {MDCNotchedOutline} from '../../mdc-notched-outline/index';
 const getFixture = () => {
   const wrapper = document.createElement('div');
   wrapper.innerHTML = `
-    <div class="mdc-notched-outline">
-      <div class="mdc-notched-outline__leading"></div>
-      <div class="mdc-notched-outline__notch"></div>
-      <div class="mdc-notched-outline__trailing"></div>
-    </div>
+    <span class="mdc-notched-outline">
+      <span class="mdc-notched-outline__leading"></span>
+      <span class="mdc-notched-outline__notch"></span>
+      <span class="mdc-notched-outline__trailing"></span>
+    </span>
   `;
   const el = wrapper.firstElementChild as HTMLElement;
   wrapper.removeChild(el);

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -52,7 +52,7 @@ The select requires that you set the `width` of the `mdc-select__anchor` element
     <i class="mdc-select__dropdown-icon"></i>
     <div class="mdc-select__selected-text"></div>
     <span class="mdc-floating-label">Pick a Food Group</span>
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   </div>
 
   <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
@@ -113,7 +113,7 @@ The following is an example of the select component with all of the necessary ar
     <i class="mdc-select__dropdown-icon"></i>
     <div id="demo-selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label demo-selected-text">Vegetables</div>
     <span id="demo-label" class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</span>
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   </div>
 
   <div class="mdc-select__menu mdc-menu mdc-menu-surface" role="listbox">
@@ -146,13 +146,13 @@ same.
   <div class="mdc-select__anchor">
     <i class="mdc-select__dropdown-icon"></i>
     <div id="demo-selected-text" class="mdc-select__selected-text" aria-labelledby="outlined-select-label"></div>
-    <div class="mdc-notched-outline">
-      <div class="mdc-notched-outline__leading"></div>
-      <div class="mdc-notched-outline__notch">
+    <span class="mdc-notched-outline">
+      <span class="mdc-notched-outline__leading"></span>
+      <span class="mdc-notched-outline__notch">
         <span id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</span>
-      </div>
-      <div class="mdc-notched-outline__trailing"></div>
-    </div>
+      </span>
+      <span class="mdc-notched-outline__trailing"></span>
+    </span>
   </div>
 
   <!-- Other elements from the select remain. -->
@@ -174,7 +174,7 @@ to set the selected item. The select also needs the text from the selected eleme
     <i class="mdc-select__dropdown-icon"></i>
     <div class="mdc-select__selected-text">Vegetables</div>
     <span class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</span>
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   </div>
 
   <div class="mdc-select__menu demo-width-class mdc-menu mdc-menu-surface">
@@ -215,7 +215,7 @@ and set the `aria-required` attribute on the `mdc-select__selected-text` element
     <i class="mdc-select__dropdown-icon"></i>
     <div class="mdc-select__selected-text" aria-required="true"></div>
     <span class="mdc-floating-label">Pick a Food Group</span>
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   </div>
 
   <div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -237,7 +237,7 @@ Add the `mdc-select--disabled` class to the `mdc-select` element and and set the
     <i class="mdc-select__dropdown-icon"></i>
     <div class="mdc-select__selected-text" aria-disabled="true"></div>
     <span class="mdc-floating-label">Pick a Food Group</span>
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   </div>
 
   <div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -301,7 +301,7 @@ structure.
   <div class="mdc-select__anchor demo-width-class">
     <i class="mdc-select__dropdown-icon"></i>
     <div class="mdc-select__selected-text"></div>
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   </div>
 
   <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
@@ -328,10 +328,10 @@ structure.
   <div class="mdc-select__anchor demo-width-class">
     <i class="mdc-select__dropdown-icon"></i>
     <div class="mdc-select__selected-text"></div>
-    <div class="mdc-notched-outline">
-      <div class="mdc-notched-outline__leading"></div>
-      <div class="mdc-notched-outline__trailing"></div>
-    </div>
+    <span class="mdc-notched-outline">
+      <span class="mdc-notched-outline__leading"></span>
+      <span class="mdc-notched-outline__trailing"></span>
+    </span>
   </div>
 
   <!-- Other elements from the select remain. -->

diff --git a/packages/mdc-select/test/component.test.ts b/packages/mdc-select/test/component.test.ts
@@ -90,7 +90,7 @@ function getFixture() {
         <div class="mdc-select__selected-text"></div>
         <i class="mdc-select__dropdown-icon"></i>
         <span class="mdc-floating-label">Pick a Food Group</span>
-        <div class="mdc-line-ripple"></div>
+        <span class="mdc-line-ripple"></span>
       </div>
 
       <div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -116,13 +116,13 @@ function getOutlineFixture() {
         <i class="mdc-select__icon material-icons">code</i>
         <div class="mdc-select__selected-text"></div>
         <i class="mdc-select__dropdown-icon"></i>
-        <div class="mdc-notched-outline">
-          <div class="mdc-notched-outline__leading"></div>
-          <div class="mdc-notched-outline__notch">
+        <span class="mdc-notched-outline">
+          <span class="mdc-notched-outline__leading"></span>
+          <span class="mdc-notched-outline__notch">
             <span class="mdc-floating-label">Pick a Food Group</span>
-          </div>
-          <div class="mdc-notched-outline__trailing"></div>
-        </div>
+          </span>
+          <span class="mdc-notched-outline__trailing"></span>
+        </span>
       </div>
 
       <div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -415,7 +415,7 @@ describe('MDCSelect', () => {
       <div class="mdc-select__anchor">
         <div class="mdc-select__selected-text"></div>
         <label class="mdc-floating-label">Pick a Food Group</label>
-        <div class="mdc-line-ripple"></div>
+        <span class="mdc-line-ripple"></span>
       </div>
 
       <div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -442,7 +442,7 @@ describe('MDCSelect', () => {
       <div class="mdc-select__anchor">
         <div class="mdc-select__selected-text"></div>
         <label class="mdc-floating-label">Pick a Food Group</label>
-        <div class="mdc-line-ripple"></div>
+        <span class="mdc-line-ripple"></span>
       </div>
 
       <div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -575,7 +575,7 @@ describe('MDCSelect', () => {
     <div class="mdc-select">
       <div class="mdc-select__anchor">
         <div class="mdc-select__selected-text"></div>
-        <div class="mdc-line-ripple"></div>
+        <span class="mdc-line-ripple"></span>
       </div>
 
       <div class="mdc-select__menu mdc-menu mdc-menu-surface">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@use './material-components-web';
		@use "./material-components-web";
-Original file line number
+Diff line change
@@ -1,4 +1,3 @@
     //
     // Copyright 2017 Google Inc.
     //
@@ Expand Down @@