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.

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">

packages/material-components-web/material-components-web.scss

@@ -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";

packages/mdc-button/README.md

@@ -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.

packages/mdc-button/_mixins.scss

@@ -26,6 +26,8 @@
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
+@import "@material/shape/mixins";
+@import "@material/shape/functions";
 @import "./variables";
 
 @mixin mdc-button-filled-accessible($container-fill-color) {
@@ -68,8 +70,12 @@
   }
 }
 
-@mixin mdc-button-corner-radius($corner-radius) {
-  border-radius: $corner-radius;
+@mixin mdc-button-shape-radius($radius, $rtl-reflexive: false) {
+  @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius), $rtl-reflexive);
+
+  &.mdc-button--dense {
+    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius), $rtl-reflexive);
+  }
 }
 
 @mixin mdc-button-horizontal-padding($padding) {

packages/mdc-button/mdc-button.scss

@@ -28,7 +28,7 @@
 // postcss-bem-linter: define button
 .mdc-button {
   @include mdc-button-base_;
-  @include mdc-button-corner-radius(2px);
+  @include mdc-button-shape-radius(small);
   @include mdc-button-container-fill-color(transparent);
   @include mdc-button-ink-color(primary);
   @include mdc-states(primary);

packages/mdc-button/package.json

@@ -17,6 +17,7 @@
     "@material/ripple": "^0.39.3",
     "@material/rtl": "^0.39.1",
     "@material/theme": "^0.39.1",
-    "@material/typography": "^0.39.0"
+    "@material/typography": "^0.39.0",
+    "@material/shape": "^0.39.0"
   }
 }

packages/mdc-card/README.md

@@ -193,5 +193,5 @@ Mixin | Description
 --- | ---
 `mdc-card-fill-color($color)` | Sets the fill color of a card
 `mdc-card-outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow)
-`mdc-card-corner-radius($radius)` | Sets the corner radius of a card
+`mdc-card-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to card with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-card-media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width