From 530966e05a5c8258f5d8bc67ab3f1a3c366ae32d Mon Sep 17 00:00:00 2001
From: Simon <watsonsemon@gmail.com>
Date: Fri, 14 Feb 2020 11:27:04 +1300
Subject: [PATCH 1/9] Updated css break points to align with spec

---
 packages/mdc-layout-grid/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-layout-grid/_variables.scss b/packages/mdc-layout-grid/_variables.scss
index a8886416361..9e3eae2aaa1 100644
--- 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;
 

From eb062e6acd083654e56052170ed11ce6893a4e21 Mon Sep 17 00:00:00 2001
From: Boris Damevin <borisdamevin@gmail.com>
Date: Tue, 18 Feb 2020 01:38:08 +0100
Subject: [PATCH 2/9] refactor: @use position

---
 packages/mdc-base/_mixins.scss          | 3 ++-
 packages/mdc-typography/_functions.scss | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-base/_mixins.scss b/packages/mdc-base/_mixins.scss
index 293e5c8d632..74839cc4257 100644
--- 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-typography/_functions.scss b/packages/mdc-typography/_functions.scss
index e0c1339f15e..c748a09bfd9 100644
--- a/packages/mdc-typography/_functions.scss
+++ b/packages/mdc-typography/_functions.scss
@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "sass:string";
-
 //
 // Copyright 2018 Google Inc.
 //
@@ -23,6 +20,9 @@
 // THE SOFTWARE.
 //
 
+@use "sass:map";
+@use "sass:string";
+
 @function get-global-variable_($style) {
   @if $style == "headline1" {
     @return $mdc-typography-styles-headline1;

From 6a56f387c498e80cbac1cac5de6b4963325ffda6 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Tue, 18 Feb 2020 11:37:46 -0800
Subject: [PATCH 3/9] feat(typography): add CSS custom properties

PiperOrigin-RevId: 295784229
---
 packages/mdc-theme/_functions.scss      | 15 +++-
 packages/mdc-typography/README.md       | 95 ++++++++++++++++++++-----
 packages/mdc-typography/_mixins.scss    | 76 +++++++++++++-------
 packages/mdc-typography/_variables.scss |  4 +-
 packages/mdc-typography/package.json    |  3 +-
 5 files changed, 145 insertions(+), 48 deletions(-)

diff --git a/packages/mdc-theme/_functions.scss b/packages/mdc-theme/_functions.scss
index 39d517871db..7fc74c1a0de 100644
--- a/packages/mdc-theme/_functions.scss
+++ b/packages/mdc-theme/_functions.scss
@@ -76,14 +76,23 @@
 }
 
 @function get-var-fallback_($style) {
-  @return map.get($style, "fallback");
+  $fallback: map.get($style, "fallback");
+  @if is-var-with-fallback_($fallback) {
+    @return get-var-fallback_($fallback);
+  } @else {
+    @return $fallback;
+  }
 }
 
 @function var_($style) {
   $var: map.get($style, "varname");
-  $fallback: get-var-fallback_($style);
+  $fallback: map.get($style, "fallback");
 
-  @return var(#{$var}, $fallback);
+  @if is-var-with-fallback_($fallback) {
+    @return var(#{$var}, var_($fallback));
+  } @else {
+    @return var(#{$var}, $fallback);
+  }
 }
 
 ///
diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md
index 70c607efbba..0a68a8042af 100644
--- a/packages/mdc-typography/README.md
+++ b/packages/mdc-typography/README.md
@@ -67,6 +67,26 @@ We recommend using Roboto from Google Fonts:
 
 ## Style Customization
 
+### Typography styles
+
+The typography styles (referred to as `<STYLE>` below) used in the type system:
+
+Scale | Description
+--- | ---
+`headline1` | The largest text on the screen, reserved for short, important text or numerals
+`headline2` | Headline variant 2
+`headline3` | Headline variant 3
+`headline4` | Headline variant 4
+`headline5` | Headline variant 5
+`headline6` | Headline variant 6
+`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length
+`subtitle2` | Subtitle variant 2
+`body1` | Used for long-form writing
+`body2` | Body variant 2
+`caption` | Used sparingly to annotate imagery
+`button` | A call to action used by different types of buttons
+`overline` | Used sparingly to introduce a headline
+
 ### CSS Classes
 
 Some components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles.
@@ -76,19 +96,22 @@ If you want to set the typographic style of an element, which is not a Material
 CSS Class | Description
 --- | ---
 `mdc-typography` | Sets the font to Roboto
-`mdc-typography--headline1` | Sets font properties as Headline 1
-`mdc-typography--headline2` | Sets font properties as Headline 2
-`mdc-typography--headline3` | Sets font properties as Headline 3
-`mdc-typography--headline4` | Sets font properties as Headline 4
-`mdc-typography--headline5` | Sets font properties as Headline 5
-`mdc-typography--headline6` | Sets font properties as Headline 6
-`mdc-typography--subtitle1` | Sets font properties as Subtitle 1
-`mdc-typography--subtitle2` | Sets font properties as Subtitle 2
-`mdc-typography--body1` | Sets font properties as Body 1
-`mdc-typography--body2` | Sets font properties as Body 2
-`mdc-typography--caption` | Sets font properties as Caption
-`mdc-typography--button` | Sets font properties as Button
-`mdc-typography--overline` | Sets font properties as Overline
+`mdc-typography--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)
+
+For example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.
+
+### CSS Custom Properties
+
+CSS Custom property | Description
+--- | ---
+`--mdc-typography-font-family` | The base font-family
+`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)
+`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)
+`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)
+`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)
+`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)
+`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)
+`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)
 
 ### Sass Variables and Mixins
 
@@ -96,6 +119,7 @@ Mixin | Description
 --- | ---
 `base` | Sets the font to Roboto
 `mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto
+`smooth-font` | Adds antialiasing for typography
 `overflow-ellipsis` | Truncates overflow text to one line with an ellipsis
 `baseline-top($distance)` | Sets the baseline height of a text element from top.
 `baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.
@@ -122,11 +146,24 @@ These styles can be used as the `$style` argument for the `mdc-typography` mixin
 
 #### Overriding Styles
 
-All styles can be overridden using Sass global variables _before_ the component is imported by setting a global 
+All styles can be overridden using CSS custom properties or Sass global variables.
+
+When using Sass global variables, they must be defined _before_ the component is imported by setting a global 
 variable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties
 you want to override for a particular style.
 
-Example: Overriding the button `font-size` and `text-transform` properties.
+**Example:** Overriding the button `font-size` and `text-transform` properties.
+
+CSS custom properties:
+
+```css
+html {
+  --mdc-typography-button-font-size: 16px;
+  --mdc-typography-button-text-transform: 16px;
+}
+```
+
+Sass global variables:
 
 ```scss
 $mdc-typography-styles-button: (
@@ -137,7 +174,18 @@ $mdc-typography-styles-button: (
 @use "@material/button/mdc-button";
 ```
 
-Example: Overriding the global `font-family` property. 
+**Example:** Overriding the global `font-family` property.
+
+CSS custom properties:
+
+```css
+html {
+  --mdc-typography-font-family: Arial, Helvetica, sans-serif;
+}
+```
+
+Sass global variables:
+
 ```scss
 $mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
 
@@ -145,7 +193,20 @@ $mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
 @use ...
 ```
 
-Example: Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.
+**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.
+
+CSS custom properties:
+
+```css
+html {
+  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;
+  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;
+  --mdc-typography-headline2-font-size: 3.25rem;
+}
+```
+
+Sass global variables:
+
 ```scss
 $mdc-typography-styles-headline1: (
   font-family: unquote("Arial, Helvetica, sans-serif")
diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
index e111198bee8..898193700fe 100644
--- a/packages/mdc-typography/_mixins.scss
+++ b/packages/mdc-typography/_mixins.scss
@@ -22,11 +22,12 @@
 
 @use "sass:list";
 @use "sass:map";
-@use "@material/feature-targeting/functions";
-@use "@material/feature-targeting/mixins";
+@use "sass:string";
+@use "@material/feature-targeting" as feature-targeting;
+@use "@material/theme";
 @use "./variables";
 
-@mixin core-styles($query: functions.all()) {
+@mixin core-styles($query: feature-targeting.all()) {
   .mdc-typography {
     @include base($query: $query);
   }
@@ -38,48 +39,75 @@
   }
 }
 
-@mixin base($query: functions.all()) {
-  $feat-typography: functions.create-target($query, typography);
+@mixin base($query: feature-targeting.all()) {
+  $feat-typography: feature-targeting.create-target($query, typography);
 
-  @include mixins.targets($feat-typography) {
-    @each $key, $value in variables.$base {
-      #{$key}: $value;
-    }
+  @include smooth-font($query: $query);
+  @include feature-targeting.targets($feat-typography) {
+    @include theme.prop(font-family, (
+      varname: --mdc-typography-font-family,
+      fallback: map.get(variables.$base, 'font-family')
+    ));
   }
 }
 
-@mixin typography($style, $query: functions.all(), $exclude-props: ()) {
-  $feat-typography: functions.create-target($query, typography);
+@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {
+  $feat-typography: feature-targeting.create-target($query, typography);
   $style-props: map.get(variables.$styles, $style);
 
   @if not map.has-key(variables.$styles, $style) {
     @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$styles)}";
   }
 
-  @include mixins.targets($feat-typography) {
+  @include smooth-font($query: $query);
+  @include feature-targeting.targets($feat-typography) {
     @each $key, $value in $style-props {
       @if list.index($exclude-props, $key) == null {
-        #{$key}: $value;
+        $fallback: $value;
+        @if $key == "font-family" {
+          // Each style has its own font-family custom property, but should
+          // fallback to a generic font-family property. This allows
+          // customizing the font-family for all styles or only specific ones.
+          $fallback: (
+            varname: --mdc-typography-font-family,
+            fallback: $fallback
+          );
+        }
+
+        @include theme.prop($key, (
+          varname: --mdc-typography-#{$style}-#{$key},
+          fallback: $fallback
+        ));
       }
     }
   }
 }
 
+/// Applies antialiasing via font-smoothing to text.
+@mixin smooth-font($query: feature-targeting.all()) {
+  $feat-typography: feature-targeting.create-target($query, typography);
+
+  @include feature-targeting.targets($feat-typography) {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
 // Element must be `display: block` or `display: inline-block` for this to work.
-@mixin overflow-ellipsis($query: functions.all()) {
-  $feat-structure: functions.create-target($query, structure);
+@mixin overflow-ellipsis($query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
 
-  @include mixins.targets($feat-structure) {
+  @include feature-targeting.targets($feat-structure) {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
 }
 
-@mixin baseline-top($distance, $query: functions.all()) {
-  $feat-structure: functions.create-target($query, structure);
+@mixin baseline-top($distance, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
 
-  @include mixins.targets($feat-structure) {
+  @include feature-targeting.targets($feat-structure) {
     display: block;
     margin-top: 0;
     /* @alternate */
@@ -87,7 +115,7 @@
   }
 
   &::before {
-    @include mixins.targets($feat-structure) {
+    @include feature-targeting.targets($feat-structure) {
       @include baseline-strut_($distance);
 
       vertical-align: 0;
@@ -95,15 +123,15 @@
   }
 }
 
-@mixin baseline-bottom($distance, $query: functions.all()) {
-  $feat-structure: functions.create-target($query, structure);
+@mixin baseline-bottom($distance, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
 
-  @include mixins.targets($feat-structure) {
+  @include feature-targeting.targets($feat-structure) {
     margin-bottom: -1 * $distance;
   }
 
   &::after {
-    @include mixins.targets($feat-structure) {
+    @include feature-targeting.targets($feat-structure) {
       @include baseline-strut_($distance);
 
       vertical-align: -1 * $distance;
diff --git a/packages/mdc-typography/_variables.scss b/packages/mdc-typography/_variables.scss
index 150c1e7c366..54d3800ab64 100644
--- a/packages/mdc-typography/_variables.scss
+++ b/packages/mdc-typography/_variables.scss
@@ -27,9 +27,7 @@
 $font-family: string.unquote("Roboto, sans-serif") !default;
 
 $base: (
-  font-family: $font-family,
-  -moz-osx-font-smoothing: grayscale,
-  -webkit-font-smoothing: antialiased,
+  font-family: $font-family
 ) !default;
 
 $font-weight-values: (
diff --git a/packages/mdc-typography/package.json b/packages/mdc-typography/package.json
index f1ff11348eb..2609c16c185 100644
--- a/packages/mdc-typography/package.json
+++ b/packages/mdc-typography/package.json
@@ -15,6 +15,7 @@
     "directory": "packages/mdc-typography"
   },
   "dependencies": {
-    "@material/feature-targeting": "^5.0.0"
+    "@material/feature-targeting": "^5.0.0",
+    "@material/theme": "^5.0.0"
   }
 }

From 772a03ef057047f506bb858dead1d59db0fce50e Mon Sep 17 00:00:00 2001
From: Esteban Gonzalez <esgonzalez@google.com>
Date: Thu, 20 Feb 2020 17:57:07 +0100
Subject: [PATCH 4/9] fix(typography): Separate @material/feature-targeting,
 was causing Sass test to fail

---
 packages/mdc-typography/_mixins.scss | 51 ++++++++++++++--------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
index 898193700fe..a4fc1b11840 100644
--- a/packages/mdc-typography/_mixins.scss
+++ b/packages/mdc-typography/_mixins.scss
@@ -23,11 +23,12 @@
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
-@use "@material/feature-targeting" as feature-targeting;
-@use "@material/theme";
+@use "@material/feature-targeting/functions" as feature-targeting-functions;
+@use "@material/feature-targeting/mixins" as feature-targeting-mixins;
+@use "@material/theme/mixins" as theme-mixins;
 @use "./variables";
 
-@mixin core-styles($query: feature-targeting.all()) {
+@mixin core-styles($query: feature-targeting-functions.all()) {
   .mdc-typography {
     @include base($query: $query);
   }
@@ -39,20 +40,20 @@
   }
 }
 
-@mixin base($query: feature-targeting.all()) {
-  $feat-typography: feature-targeting.create-target($query, typography);
+@mixin base($query: feature-targeting-functions.all()) {
+  $feat-typography: feature-targeting-functions.create-target($query, typography);
 
   @include smooth-font($query: $query);
-  @include feature-targeting.targets($feat-typography) {
-    @include theme.prop(font-family, (
+  @include feature-targeting-mixins.targets($feat-typography) {
+    @include theme-mixins.prop(font-family, (
       varname: --mdc-typography-font-family,
       fallback: map.get(variables.$base, 'font-family')
     ));
   }
 }
 
-@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {
-  $feat-typography: feature-targeting.create-target($query, typography);
+@mixin typography($style, $query: feature-targeting-functions.all(), $exclude-props: ()) {
+  $feat-typography: feature-targeting-functions.create-target($query, typography);
   $style-props: map.get(variables.$styles, $style);
 
   @if not map.has-key(variables.$styles, $style) {
@@ -60,7 +61,7 @@
   }
 
   @include smooth-font($query: $query);
-  @include feature-targeting.targets($feat-typography) {
+  @include feature-targeting-mixins.targets($feat-typography) {
     @each $key, $value in $style-props {
       @if list.index($exclude-props, $key) == null {
         $fallback: $value;
@@ -74,7 +75,7 @@
           );
         }
 
-        @include theme.prop($key, (
+        @include theme-mixins.prop($key, (
           varname: --mdc-typography-#{$style}-#{$key},
           fallback: $fallback
         ));
@@ -84,30 +85,30 @@
 }
 
 /// Applies antialiasing via font-smoothing to text.
-@mixin smooth-font($query: feature-targeting.all()) {
-  $feat-typography: feature-targeting.create-target($query, typography);
+@mixin smooth-font($query: feature-targeting-functions.all()) {
+  $feat-typography: feature-targeting-functions.create-target($query, typography);
 
-  @include feature-targeting.targets($feat-typography) {
+  @include feature-targeting-mixins.targets($feat-typography) {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
   }
 }
 
 // Element must be `display: block` or `display: inline-block` for this to work.
-@mixin overflow-ellipsis($query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
+@mixin overflow-ellipsis($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
 
-  @include feature-targeting.targets($feat-structure) {
+  @include feature-targeting-mixins.targets($feat-structure) {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
 }
 
-@mixin baseline-top($distance, $query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
+@mixin baseline-top($distance, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
 
-  @include feature-targeting.targets($feat-structure) {
+  @include feature-targeting-mixins.targets($feat-structure) {
     display: block;
     margin-top: 0;
     /* @alternate */
@@ -115,7 +116,7 @@
   }
 
   &::before {
-    @include feature-targeting.targets($feat-structure) {
+    @include feature-targeting-mixins.targets($feat-structure) {
       @include baseline-strut_($distance);
 
       vertical-align: 0;
@@ -123,15 +124,15 @@
   }
 }
 
-@mixin baseline-bottom($distance, $query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
+@mixin baseline-bottom($distance, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
 
-  @include feature-targeting.targets($feat-structure) {
+  @include feature-targeting-mixins.targets($feat-structure) {
     margin-bottom: -1 * $distance;
   }
 
   &::after {
-    @include feature-targeting.targets($feat-structure) {
+    @include feature-targeting-mixins.targets($feat-structure) {
       @include baseline-strut_($distance);
 
       vertical-align: -1 * $distance;

From 765caef189844153ac7e47f0102139dc938edbfb Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Fri, 21 Feb 2020 09:28:01 -0800
Subject: [PATCH 5/9] fix(textfield): replace notched outline and ripple
 `<div>`s with `<span>`

PiperOrigin-RevId: 296449447
---
 docs/migrating-from-mdl.md                    |  8 +-
 packages/mdc-auto-init/README.md              |  8 +-
 packages/mdc-line-ripple/README.md            |  2 +-
 .../mdc-line-ripple/test/component.test.ts    |  2 +-
 packages/mdc-notched-outline/README.md        | 12 +--
 .../test/component.test.ts                    | 10 +--
 packages/mdc-select/README.md                 | 32 +++----
 packages/mdc-select/test/component.test.ts    | 20 ++---
 packages/mdc-textfield/README.md              | 84 +++++++++----------
 packages/mdc-textfield/test/component.test.ts |  6 +-
 10 files changed, 92 insertions(+), 92 deletions(-)

diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
index c4b723c1af2..db18d88dcb0 100644
--- 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/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
index d3f4382f4fa..cdb7065ddb9 100644
--- 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-line-ripple/README.md b/packages/mdc-line-ripple/README.md
index 006e2cde8f7..cdff58a3987 100644
--- 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
index c28a4662ce4..bf3a4f33319 100644
--- 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
index b0b67e95c15..ea73dbf4d7d 100644
--- 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
index bd1d54ba655..c716ad76e04 100644
--- 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
index 06e6f8121d0..0ca920e2c5e 100644
--- 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
index 0c1c1826622..4544c90f0b9 100644
--- 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">
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 04468cd20fc..3df0c3d644e 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -33,10 +33,10 @@ npm install @material/textfield
 
 ```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="my-label-id">
   <span class="mdc-floating-label" id="my-label-id">Hint text</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -67,12 +67,12 @@ Full width text fields are useful for in-depth tasks or entering complex informa
 
 ```html
 <label class="mdc-text-field mdc-text-field--fullwidth">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input"
          type="text"
          placeholder="Full-Width Text Field"
          aria-label="Full-Width Text Field">
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -86,13 +86,13 @@ included as part of the DOM structure of a full width text field.
 ```html
 <label class="mdc-text-field mdc-text-field--textarea">
   <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40"></textarea>
-  <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">
       <label class="mdc-floating-label" id="my-label-id">Textarea Label</label>
-    </div>
-    <div class="mdc-notched-outline__trailing"></div>
-  </div>
+    </span>
+    <span class="mdc-notched-outline__trailing"></span>
+  </span>
 </label>
 ```
 
@@ -101,13 +101,13 @@ included as part of the DOM structure of a full width text field.
 ```html
 <label class="mdc-text-field mdc-text-field--outlined">
   <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
-  <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" id="my-label-id">Your Name</span>
-    </div>
-    <div class="mdc-notched-outline__trailing"></div>
-  </div>
+    </span>
+    <span class="mdc-notched-outline__trailing"></span>
+  </span>
 </label>
 ```
 
@@ -121,10 +121,10 @@ To disable the text field, add the `disabled` attribute to the `<input>` element
 
 ```html
 <label class="mdc-text-field mdc-text-field--disabled">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
   <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -137,9 +137,9 @@ Add class name `mdc-text-field--no-label` and remove the label element from the
 
 ```html
 <label class="mdc-text-field mdc-text-field--no-label">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -148,10 +148,10 @@ Add class name `mdc-text-field--no-label` and remove the label element from the
 ```html
 <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
   <input class="mdc-text-field__input" type="text" aria-label="Label">
-  <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>
 </label>
 ```
 
@@ -160,10 +160,10 @@ Add class name `mdc-text-field--no-label` and remove the label element from the
 ```html
 <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
   <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
-  <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>
 </label>
 ```
 
@@ -175,13 +175,13 @@ which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for mo
 
 ```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="my-label-id"
          aria-controls="my-helper-id"
          aria-describedby="my-helper-id">
   <span class="mdc-floating-label" id="my-label-id">My Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 <div class="mdc-text-field-helper-line">
   <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
@@ -196,10 +196,10 @@ See [here](character-counter/) for more information on using character counter.
 
 ```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="my-label-id" maxlength="10">
   <span class="mdc-floating-label" id="my-label-id">My Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 <div class="mdc-text-field-helper-line">
   <div class="mdc-text-field-character-counter">0 / 10</div>
@@ -215,13 +215,13 @@ inside of text field component.
 <label class="mdc-text-field mdc-text-field--textarea">
   <div class="mdc-text-field-character-counter">0 / 140</div>
   <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
-  <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" id="my-label-id">Textarea Label</span>
-    </div>
-    <div class="mdc-notched-outline__trailing"></div>
-  </div>
+    </span>
+    <span class="mdc-notched-outline__trailing"></span>
+  </span>
 </label>
 ```
 
@@ -240,10 +240,10 @@ by HTML5's form validation API.
 
 ```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="password" aria-labelledby="my-label-id" required minlength="8">
   <span class="mdc-floating-label" id="my-label-id">Password</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -258,12 +258,12 @@ Un-styled Content (**FOUC**).
 
 ```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="my-label-id" value="Pre-filled value">
   <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
     Label in correct place
   </span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
diff --git a/packages/mdc-textfield/test/component.test.ts b/packages/mdc-textfield/test/component.test.ts
index 6712e7b361c..8b11fb199c7 100644
--- a/packages/mdc-textfield/test/component.test.ts
+++ b/packages/mdc-textfield/test/component.test.ts
@@ -40,7 +40,7 @@ const getFixture = () => {
       <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
       <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
       <span class="mdc-floating-label" id="my-label">My Label</span>
-      <div class="mdc-line-ripple"></div>
+      <span class="mdc-line-ripple"></span>
     </label>
   `;
   const el = wrapper.firstElementChild as HTMLElement;
@@ -256,7 +256,7 @@ describe('MDCTextField', () => {
   it('#constructor instantiates an outline on the `.mdc-notched-outline` element if present',
      () => {
        const wrapper = document.createElement('div');
-       wrapper.innerHTML = `<div class="mdc-notched-outline"></div>`;
+       wrapper.innerHTML = `<span class="mdc-notched-outline"></span>`;
        const child = wrapper.firstElementChild as HTMLElement;
        wrapper.removeChild(child);
 
@@ -410,7 +410,7 @@ describe('MDCTextField', () => {
 
   it('#destroy cleans up the outline if present', () => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<div class="mdc-notched-outline"></div>`;
+    wrapper.innerHTML = `<span class="mdc-notched-outline"></span>`;
     const child = wrapper.firstElementChild as HTMLElement;
     wrapper.removeChild(child);
 

From 949562303966c057e50c09b25007ad8391d365d0 Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Fri, 21 Feb 2020 20:25:23 +0000
Subject: [PATCH 6/9] chore: Project import by Copybara

PiperOrigin-RevId: 296487849
---
 packages/material-components-web/index.scss | 2 +-
 packages/mdc-chips/mdc-chips.scss           | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/material-components-web/index.scss b/packages/material-components-web/index.scss
index cd6335cd8b5..f058c88d8d4 100644
--- 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-chips/mdc-chips.scss b/packages/mdc-chips/mdc-chips.scss
index 9e74164b802..f4910528a22 100644
--- a/packages/mdc-chips/mdc-chips.scss
+++ b/packages/mdc-chips/mdc-chips.scss
@@ -1,4 +1,3 @@
-
 //
 // Copyright 2017 Google Inc.
 //

From da9b957758b77174a8f7a120c669f6daa169ab2f Mon Sep 17 00:00:00 2001
From: Allan Chen <allanchen@google.com>
Date: Fri, 21 Feb 2020 15:54:12 -0500
Subject: [PATCH 7/9] chore: Exclude WIP circular progress from dependency test
 (#5637)

---
 scripts/check-pkg-for-release.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/check-pkg-for-release.js b/scripts/check-pkg-for-release.js
index 3a9db64f3eb..55c01f37b7a 100644
--- a/scripts/check-pkg-for-release.js
+++ b/scripts/check-pkg-for-release.js
@@ -69,6 +69,7 @@ const CSS_EXCLUDES = new Set([
   'base',
   'animation',
   'auto-init',
+  'circular-progress', // TODO(b/149941300): remove once component is complete
   'density',
   'dom',
   'feature-targeting',
@@ -80,12 +81,14 @@ const CSS_EXCLUDES = new Set([
 
 const JS_EXCLUDES = new Set([
   'animation',
+  'circular-progress', // TODO(b/149941300): remove once component is complete
   'progress-indicator',
 ]);
 
 const NOT_AUTOINIT = new Set([
   'auto-init',
   'base',
+  'circular-progress', // TODO(b/149941300): remove once component is complete
   'dom',
   'progress-indicator',
   'tab', // Only makes sense in context of tab-bar

From 2f275e2bd9e1c9d1dd0b2bf126ceb93f7b2760f0 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@google.com>
Date: Mon, 24 Feb 2020 07:30:19 -0800
Subject: [PATCH 8/9] docs: Moved rotation docs to internal folder.

PiperOrigin-RevId: 296887194
---
 docs/open_source/rotation.md | 111 -----------------------------------
 1 file changed, 111 deletions(-)
 delete mode 100644 docs/open_source/rotation.md

diff --git a/docs/open_source/rotation.md b/docs/open_source/rotation.md
deleted file mode 100644
index 5af9911ab2a..00000000000
--- a/docs/open_source/rotation.md
+++ /dev/null
@@ -1,111 +0,0 @@
-# Rotation
-
-[TOC]
-
-This page outlines responsibilities for the oncall rotation and issue triaging
-of MDC Web.
-
-## Before you start
-
-*   Complete MDC Web [onboarding](http://go/mdc-web-onboard) process.
-*   Join
-    [MDC Web rotation](https://rotations.corp.google.com/rotation/5708184800985088)
-    calendar.
-*   Add "Material Web Triage" meeting to your calendar.
-*   Go to
-    [MDC Web ZenHub Dashboard](https://goto.google.com/mdc-web-triage-bugs) to
-    see Untriaged issues. (Sort Untriaged pipeline
-    [by New](https://screenshot.googleplex.com/r90Yeco4ebw.png))
-*   Set up notifications of your GitHub profile to receive emails for any
-    activity on MDC Web
-    [GitHub repository](https://github.com/material-components/material-components-web)
-    when you're on-call.
-
-## Rotation
-
-Responsibilities of rotation on-call include:
-
-*   Responding to GitHub
-    [issues](https://github.com/material-components/material-components-web/issues)
-*   Code reviewing external / internal GitHub
-    [pull requests](https://github.com/material-components/material-components-web/pulls)
-    (PR's)
-*   Importing external GitHub PR's when they're ready to merge. See
-    go/mdc-web-g3sync
-
-### Issues
-
-Being on-call does not mean you have be the one to actually fix issues, we
-simply triage. Issues may fall in one of the following categories.
-
-#### Feature Requests
-
-First, check if this request is in the [spec](https://material.io/guidelines).
-If you're not sure, reach out to Material System UX on-call - go/system-team or
-open a thread in Material System chat room:
-
-*   If it is not in spec, respond on the PR that we do not accept feature
-    requests for components that are not in our spec, and close it.
-*   If it is in the spec, discuss in triage meeting and move it to backlog.
-
-#### Bugs
-
-When a bug is reported, first ensure it has clear reproducible steps with
-sufficient information. If not, point them to our
-[bug template](https://github.com/material-components/material-components-web/issues/new?assignees=&labels=bug&template=--bug-report.md&title=%5BComponentName%5D+title)
-and ask for more information.
-
-If you're able to reproduce the bug and it is a legitimate bug in MDC Web,
-respond that you were able to reproduce the bug and move it to backlog. If
-you're not able to reproduce the bug, ask for more information.
-
-If the bug is small, encourage them to open a PR before moving it to backlog.
-
-#### Other issues
-
-There are other issues outside of FR's or bugs, although try not to spend too
-much time investigating issues that are out of scope for MDC Web. Issues can be
-closed if you think they are out of scope.
-
-*   There are a few **installation problems** that we can help with, such as,
-    installing MDC Web components and usage. However, it's best if the answer to
-    this question is a link to documentation. If it is out of scope, tell the
-    reporter we do not have the expertise to help them with this question,
-    suggest they ask on Stack Overflow for better results, and close the issue.
-*   Respond to any **general questions** and see if we're missing any
-    documentation. Encourage them to post on Stack Overflow instead and close
-    it.
-
-### Pull requests
-
-Any external contributions received via GitHub
-[pull requests](https://github.com/material-components/material-components-web/pulls)
-on MDC Web repo needs to be reviewed or needs attention. Googlers should always
-send CLs.
-
-Follow these steps to address any external contributions:
-
-*   When you're reviewing code, identify if PR contains any breaking change. If
-    it is a huge breaking change, ask the author to revert any breaking changes
-    or close the PR.
-*   Follow go/mdc-web-g3sync to import a PR into google3/. (You may need to add
-    additional changes in google3, such as updating BUILD rules.)
-*   PR can't be merged without importing it into google3.
-*   Always run a TGP (go/tgp) on the imported CL.
-
-## Triage meeting
-
-Triage meeting happens every Friday. If you're on-call that week, attendance is
-mandatory.
-
-On-call primary drives this meeting. Triaging involves the following steps:
-
-*   Open [MDC Web ZenHub Dashboard](https://goto.google.com/mdc-web-triage-bugs)
-    and present it to everyone.
-*   Sort "Untriaged" pipeline by "New" (any new issues that are opened
-    automatically appear here).
-*   Go through issues that you think that needs team discussion.
-
-In most of the cases, the oncall should have already gone through all new issues
-and have a good understanding of the issue. This makes the triage meeting
-smoother to discuss.

From 7ec96974ef0c0c743b1eaaec40524ddc9c7e99e5 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 24 Feb 2020 10:52:43 -0800
Subject: [PATCH 9/9] fix(typography): ensure global variables can override
 styles with module system

PiperOrigin-RevId: 296927628
---
 packages/mdc-typography/README.md             | 60 ++++++++++++++++---
 packages/mdc-typography/_functions.scss       | 40 +------------
 packages/mdc-typography/_variables.scss       | 30 ++++++++++
 .../test/global-variables.test.scss           |  8 +++
 .../test/mdc-typography.scss.test.ts          | 15 +++++
 5 files changed, 107 insertions(+), 46 deletions(-)
 create mode 100644 packages/mdc-typography/test/global-variables.test.scss

diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md
index 0a68a8042af..0daa548979b 100644
--- a/packages/mdc-typography/README.md
+++ b/packages/mdc-typography/README.md
@@ -146,11 +146,14 @@ These styles can be used as the `$style` argument for the `mdc-typography` mixin
 
 #### Overriding Styles
 
-All styles can be overridden using CSS custom properties or Sass global variables.
+All styles can be overridden using CSS custom properties or Sass module/global variables.
 
-When using Sass global variables, they must be defined _before_ the component is imported by setting a global 
-variable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties
-you want to override for a particular style.
+When using Sass **module** variables, the module must be configured _before_ any other `@use` 
+statements with a variable named `$styles-{style}`. The variable should be assigned to a map 
+that contains all the properties you want to override for a particular style.
+
+When using Sass **global** variables, they must be defined _before_ the component is imported by setting a global 
+variable named `$mdc-typography-styles-{style}`.
 
 **Example:** Overriding the button `font-size` and `text-transform` properties.
 
@@ -163,6 +166,20 @@ html {
 }
 ```
 
+Sass module variables:
+
+```scss
+@use "@material/typography" with (
+  $styles-button: (
+    font-size: 16px,
+    text-transform: none,
+  )
+);
+
+@use "@material/button";
+@include button.core-styles;
+```
+
 Sass global variables:
 
 ```scss
@@ -171,7 +188,7 @@ $mdc-typography-styles-button: (
   text-transform: none,
 );
 
-@use "@material/button/mdc-button";
+@import "@material/button/mdc-button";
 ```
 
 **Example:** Overriding the global `font-family` property.
@@ -184,13 +201,23 @@ html {
 }
 ```
 
+Sass module variables:
+
+```scss
+@use "@material/typography" with (
+  $font-family: unquote("Arial, Helvetica, sans-serif")
+);
+
+@use "@material/button";
+@include button.core-styles;
+```
+
 Sass global variables:
 
 ```scss
 $mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
 
-...
-@use ...
+@import "@material/button/mdc-button";
 ```
 
 **Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.
@@ -205,6 +232,22 @@ html {
 }
 ```
 
+Sass module variables:
+
+```scss
+@use "@material/typography" with (
+  $styles-headline1: (
+    $font-family: unquote("Arial, Helvetica, sans-serif")
+  ),
+  $styles-headline2: (
+    $font-family: unquote("Arial, Helvetica, sans-serif"),
+    $font-size: 3.25rem
+  )
+);
+
+@use ...
+```
+
 Sass global variables:
 
 ```scss
@@ -216,6 +259,5 @@ $mdc-typography-styles-headline2: (
   font-size: 3.25rem
 );
 
-...
-@use ...
+@import ...
 ```
diff --git a/packages/mdc-typography/_functions.scss b/packages/mdc-typography/_functions.scss
index c748a09bfd9..2259bc59494 100644
--- a/packages/mdc-typography/_functions.scss
+++ b/packages/mdc-typography/_functions.scss
@@ -23,48 +23,14 @@
 @use "sass:map";
 @use "sass:string";
 
-@function get-global-variable_($style) {
-  @if $style == "headline1" {
-    @return $mdc-typography-styles-headline1;
-  } @else if $style == "headline2" {
-    @return $mdc-typography-styles-headline2;
-  } @else if $style == "headline3" {
-    @return $mdc-typography-styles-headline3;
-  } @else if $style == "headline4" {
-    @return $mdc-typography-styles-headline4;
-  } @else if $style == "headline5" {
-    @return $mdc-typography-styles-headline5;
-  } @else if $style == "headline6" {
-    @return $mdc-typography-styles-headline6;
-  } @else if $style == "subtitle1" {
-    @return $mdc-typography-styles-subtitle1;
-  } @else if $style == "subtitle2" {
-    @return $mdc-typography-styles-subtitle2;
-  } @else if $style == "body1" {
-    @return $mdc-typography-styles-body1;
-  } @else if $style == "body2" {
-    @return $mdc-typography-styles-body2;
-  } @else if $style == "caption" {
-    @return $mdc-typography-styles-caption;
-  } @else if $style == "button" {
-    @return $mdc-typography-styles-button;
-  } @else if $style == "overline" {
-    @return $mdc-typography-styles-overline;
-  } @else {
-    @return ();
-  }
-}
-
-@function set-styles_($base-styles, $scale-styles) {
+@function set-styles_($base-styles, $scale-styles, $override-styles) {
   @each $style, $style-props in $scale-styles {
 
     // Merge base properties for all styles.
     $style-props: map.merge($base-styles, $style-props);
 
-    // Merge global overrides onto each style.
-    @if global_variable_exists(string.unquote("mdc-typography-styles-#{$style}")) {
-      $style-props: map.merge($style-props, get-global-variable_(#{$style}));
-    }
+    // Merge overrides onto each style.
+    $style-props: map.merge($style-props, map.get($override-styles, $style));
 
     // Override original styles with new styles.
     $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));
diff --git a/packages/mdc-typography/_variables.scss b/packages/mdc-typography/_variables.scss
index 54d3800ab64..4d550cce547 100644
--- a/packages/mdc-typography/_variables.scss
+++ b/packages/mdc-typography/_variables.scss
@@ -26,6 +26,21 @@
 
 $font-family: string.unquote("Roboto, sans-serif") !default;
 
+// Override styles
+$styles-headline1: () !default;
+$styles-headline2: () !default;
+$styles-headline3: () !default;
+$styles-headline4: () !default;
+$styles-headline5: () !default;
+$styles-headline6: () !default;
+$styles-subtitle1: () !default;
+$styles-subtitle2: () !default;
+$styles-body1: () !default;
+$styles-body2: () !default;
+$styles-caption: () !default;
+$styles-button: () !default;
+$styles-overline: () !default;
+
 $base: (
   font-family: $font-family
 ) !default;
@@ -146,5 +161,20 @@ $styles: functions.set-styles_(
       text-decoration: none,
       text-transform: uppercase
     ),
+  ),
+  (
+    headline1: $styles-headline1,
+    headline2: $styles-headline2,
+    headline3: $styles-headline3,
+    headline4: $styles-headline4,
+    headline5: $styles-headline5,
+    headline6: $styles-headline6,
+    subtitle1: $styles-subtitle1,
+    subtitle2: $styles-subtitle2,
+    body1: $styles-body1,
+    body2: $styles-body2,
+    caption: $styles-caption,
+    button: $styles-button,
+    overline: $styles-overline,
   )
 ) !default;
diff --git a/packages/mdc-typography/test/global-variables.test.scss b/packages/mdc-typography/test/global-variables.test.scss
new file mode 100644
index 00000000000..2818d340509
--- /dev/null
+++ b/packages/mdc-typography/test/global-variables.test.scss
@@ -0,0 +1,8 @@
+@use "sass:string";
+
+$mdc-typography-font-family: string.unquote("Arial");
+$mdc-typography-styles-headline1: (
+  font-size: 1rem
+);
+
+@import '../mdc-typography';
diff --git a/packages/mdc-typography/test/mdc-typography.scss.test.ts b/packages/mdc-typography/test/mdc-typography.scss.test.ts
index 3ebd3140b66..3579ba47e47 100644
--- a/packages/mdc-typography/test/mdc-typography.scss.test.ts
+++ b/packages/mdc-typography/test/mdc-typography.scss.test.ts
@@ -23,10 +23,25 @@
 
 import 'jasmine';
 
+import * as fs from 'fs';
 import * as path from 'path';
 import {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';
 
 describe('mdc-typography.scss', () => {
   expectStylesWithNoFeaturesToBeEmpty(
       path.join(__dirname, 'feature-targeting-any.test.css'));
+
+  it('should allow global variable overrides with @import', () => {
+    const css = fs.readFileSync(
+                      path.join(__dirname, 'global-variables.test.css'), 'utf8')
+                    .trim();
+    const headline1Start = css.indexOf('.mdc-typography--headline1 {');
+    const headline1End = css.indexOf('}', headline1Start);
+    const headline1Css = css.substring(headline1Start, headline1End);
+    expect(headline1Css.includes('font-family: Arial'))
+        .toBe(true, '$mdc-typography-font-family should override');
+    expect(headline1Css.includes('font-size: 1rem'))
+        .toBe(
+            true, '$mdc-typography-styles-headline1-font-size should override');
+  });
 });