feat(shape): Integrate Shape API with more components

.travis.yml

@@ -13,6 +13,7 @@ branches:
   # This prevents excessive resource usage and CI slowness.
   only:
     - master
+    - feat/shape
 
 before_install:
   # Source the scripts to export their env vars. See https://superuser.com/a/176788/62792

demos/button.html

@@ -229,7 +229,7 @@ <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

demos/button.scss

@@ -44,7 +44,7 @@
 }
 
 .mdc-button.big-round-corner-button {
-  @include mdc-button-corner-radius(8px);
+  @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.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

@@ -190,14 +190,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/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

packages/mdc-card/_mixins.scss

@@ -21,6 +21,7 @@
 //
 
 @import "@material/theme/mixins";
+@import "@material/shape/mixins";
 @import "./variables";
 
 //
@@ -35,8 +36,8 @@
   border: $thickness solid mdc-theme-prop-value($color);
 }
 
-@mixin mdc-card-corner-radius($radius) {
-  border-radius: $radius;
+@mixin mdc-card-shape-radius($radius, $rtl-reflexive: false) {
+  @include mdc-shape-radius($radius, $rtl-reflexive);
 }
 
 @mixin mdc-card-media-aspect-ratio($x, $y) {

packages/mdc-card/mdc-card.scss

@@ -31,7 +31,7 @@
 
 .mdc-card {
   @include mdc-card-fill-color(surface);
-  @include mdc-card-corner-radius(2px);
+  @include mdc-card-shape-radius(small);
   @include mdc-elevation(2);
   @include mdc-card-container-layout_;
 }

packages/mdc-card/package.json

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