feat(shape): Added Shape subsystem and integrated with all components (#3626)

BREAKING CHANGE: The previous contents of the mdc-shape package have been removed and replaced with mixins implementing the Shape system. This system implements only rounded corners to provide a straightforward CSS-only solution. Replaced all *-corner-radius component mixins with *-shape-radius mixins to integrate with Shape system.

Author: abhiomkar

demos/button.html

@@ -229,10 +229,10 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Custom button</legend>
           <div>
-            <button class="mdc-button mdc-button--unelevated big-round-corner-button">
-              Corner Radius
+            <button class="mdc-button mdc-button--unelevated big-round-shape-button">
+              Shape Radius
             </button>
             <button class="mdc-button mdc-button--outlined thick-outline-button">
               Thick Outline Width
@@ -375,8 +375,8 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
         <fieldset>
           <legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
           <div>
-            <button class="mdc-button mdc-button--unelevated big-round-corner-button" data-demo-no-js>
-              Big Corner Radius
+            <button class="mdc-button mdc-button--unelevated big-round-shape-button" data-demo-no-js>
+              Shape Radius
             </button>
             <button class="mdc-button mdc-button--outlined thick-outline-button" data-demo-no-js>
               Thick Outline Width

demos/button.scss

@@ -43,8 +43,8 @@
 
 }
 
-.mdc-button.big-round-corner-button {
-  @include mdc-button-corner-radius(8px);
+.mdc-button.big-round-shape-button {
+  @include mdc-button-shape-radius(8px);
 }
 
 .mdc-button.thick-outline-button {

demos/card.scss

@@ -140,11 +140,7 @@
 //
 
 .demo-card--music {
-  @include mdc-card-corner-radius(24px 4px);
-
-  @include mdc-rtl {
-    @include mdc-card-corner-radius(4px 24px);
-  }
+  @include mdc-card-shape-radius((24px, 4px), $rtl-reflexive: true);
 }
 
 .demo-card__music-row {

demos/image-list.html

@@ -455,7 +455,10 @@ <h1 class="mdc-typography--headline5">Masonry Image List</h1>
         });
 
         document.getElementById('toggle-radius').addEventListener('change', function() {
-          document.querySelector('.example').classList[this.checked ? 'add' : 'remove']('rounded-corners');
+          var isChecked = this.checked;
+          document.querySelectorAll('.mdc-image-list').forEach(function(el) {
+            el.classList[isChecked ? 'add' : 'remove']('rounded-corners');
+          });
         });
 
         var standardImageListEl = document.getElementById('standard-image-list');

demos/image-list.scss

@@ -54,7 +54,7 @@
 }
 
 .rounded-corners {
-  @include mdc-image-list-corner-radius(8px);
+  @include mdc-image-list-shape-radius(8px);
 }
 
 @media (max-width: 599px) {

demos/index.html

@@ -183,14 +183,6 @@
             </span>
           </a>
 
-          <a href="shape.html" role="listitem" class="mdc-list-item">
-            <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_component_24px.svg" /></span>
-            <span class="mdc-list-item__text">
-              <span class="mdc-list-item__primary-text">Shape</span>
-              <span class="mdc-list-item__secondary-text">Mixins for angled corners on unelevated components</span>
-            </span>
-          </a>
-
           <a href="slider.html" role="listitem" class="mdc-list-item">
             <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/slider.svg" /></span>
             <span class="mdc-list-item__text">

demos/shape.html

@@ -44,7 +44,6 @@
 @import "@material/radio/mdc-radio";
 @import "@material/ripple/mdc-ripple";
 @import "@material/select/mdc-select";
-@import "@material/shape/mdc-shape";
 @import "@material/slider/mdc-slider";
 @import "@material/snackbar/mdc-snackbar";
 @import "@material/switch/mdc-switch";

demos/shape.scss

@@ -75,7 +75,7 @@ To style a contained button, add the `mdc-button--raised` class to the `<button>
 
 To style an outlined button, add the class `mdc-button--outlined` to the `<button>` element.
 
-### Icons 
+### Icons
 
 To add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden="true"`. The icon is set to 18px to meet legibility requirements.
 
@@ -144,7 +144,7 @@ Mixin | Description
 `mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.
 `mdc-button-icon-color($color)` | Sets the icon color to the given color.
 `mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.
-`mdc-button-corner-radius($corner-radius)` | Sets the corner radius to the given number (defaults to 2px).
+`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.
 `mdc-button-outline-color($color)` | Sets the outline color to the given color.
 `mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.