feat(shape): Integrate Shape API with more components

packages/mdc-dialog/README.md

@@ -280,7 +280,7 @@ Mixin | Description
 `mdc-dialog-title-ink-color($color, $opacity)` | Sets the color of the dialog's title text.
 `mdc-dialog-content-ink-color($color, $opacity)` | Sets the color of the dialog's content text.
 `mdc-dialog-scroll-divider-color($color, $opacity)` | Sets the color of the dividers which display around scrollable content.
-`mdc-dialog-corner-radius($radius)` | Sets the corner radius to the given amount (defaults to 4px on all sides).
+`mdc-dialog-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to dialog surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-dialog-min-width($min-width)` | Sets the minimum width of the dialog (defaults to 280px).
 `mdc-dialog-max-width($max-width, $margin)` | Sets the maximum width of the dialog (defaults to 560px max width and 16px margins).
 `mdc-dialog-max-height($max-height, $margin)` | Sets the maximum height of the dialog (defaults to no max height and 16px margins).

packages/mdc-dialog/_mixins.scss

@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/shape/mixins";
 @import "@material/theme/mixins";
 @import "@material/theme/variables"; // for mdc-theme-prop-value
 
@@ -58,9 +59,9 @@
   }
 }
 
-@mixin mdc-dialog-corner-radius($radius) {
+@mixin mdc-dialog-shape-radius($radius, $rtl-reflexive: false) {
   .mdc-dialog__surface {
-    border-radius: $radius;
+    @include mdc-shape-radius($radius, $rtl-reflexive)
   }
 }
 

packages/mdc-dialog/_variables.scss

@@ -35,6 +35,4 @@ $mdc-dialog-max-width: 560px;
 $mdc-dialog-margin: 16px;
 $mdc-dialog-title-bottom-padding: 9px;
 
-$mdc-dialog-corner-radius: 4px;
-
 $mdc-dialog-z-index: 7;

packages/mdc-dialog/mdc-dialog.scss

@@ -52,7 +52,7 @@
   @include mdc-dialog-min-width($mdc-dialog-min-width);
   @include mdc-dialog-max-width($mdc-dialog-max-width, $mdc-dialog-margin);
   @include mdc-dialog-max-height(null, $mdc-dialog-margin);
-  @include mdc-dialog-corner-radius($mdc-dialog-corner-radius);
+  @include mdc-dialog-shape-radius(medium);
 
   // Use `display: none` instead of `visibility: hidden` to avoid recalculating layout when the dialog is closed.
   display: none;

packages/mdc-dialog/package.json

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

packages/mdc-fab/README.md

@@ -127,6 +127,7 @@ Mixin | Description
 `mdc-fab-ink-color($color)` | Sets the ink color to the given color
 `mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.
 `mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.
+`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to all FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 
 The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.
 

packages/mdc-fab/_mixins.scss

@@ -25,6 +25,8 @@
 @import "@material/ripple/variables";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
+@import "@material/shape/mixins";
+@import "@material/shape/functions";
 @import "@material/rtl/mixins";
 @import "./variables";
 
@@ -86,29 +88,40 @@
   padding: 0 $label-padding;
 }
 
+@mixin mdc-fab-shape-radius($radius, $rtl-reflexive: false) {
+  @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-height, $radius), $rtl-reflexive);
+
+  &.mdc-fab--mini {
+    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-mini-height, $radius), $rtl-reflexive);
+  }
+
+  &.mdc-fab--extended {
+    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-extended-height, $radius), $rtl-reflexive);
+  }
+}
+
 $mdc-fab-icon-enter-delay_: 90ms;
 $mdc-fab-icon-enter-duration_: 180ms;
-$mdc-fab-extended-height_: 48px;
 
 @mixin mdc-fab-base_ {
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
   @include mdc-elevation(6);
+  @include mdc-fab-shape-radius(50%);
 
   display: inline-flex;
   position: relative;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: 56px;
-  height: 56px;
+  width: $mdc-fab-height;
+  height: $mdc-fab-height;
   padding: 0;
   transition:
     box-shadow $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function,
     opacity 15ms linear 30ms,
     mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_ + $mdc-fab-icon-enter-delay_);
   border: none;
-  border-radius: 50%;
   fill: currentColor;
   cursor: pointer;
   user-select: none;
@@ -155,8 +168,8 @@ $mdc-fab-extended-height_: 48px;
 }
 
 @mixin mdc-fab--mini_ {
-  width: 40px;
-  height: 40px;
+  width: $mdc-fab-mini-height;
+  height: $mdc-fab-mini-height;
 }
 
 @mixin mdc-fab--extended_ {
@@ -167,8 +180,7 @@ $mdc-fab-extended-height_: 48px;
 
   width: auto;
   max-width: 100%;
-  height: $mdc-fab-extended-height_;
-  border-radius: $mdc-fab-extended-height_ / 2;
+  height: $mdc-fab-extended-height;
 }
 
 @mixin mdc-fab__icon_ {

packages/mdc-fab/_variables.scss

@@ -22,3 +22,6 @@
 
 $mdc-fab-extended-icon-padding: 12px;
 $mdc-fab-extended-label-padding: 20px;
+$mdc-fab-height: 56px;
+$mdc-fab-mini-height: 40px;
+$mdc-fab-extended-height: 48px;

packages/mdc-fab/package.json

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

packages/mdc-menu-surface/README.md

@@ -112,8 +112,8 @@ menuSurface.setFixedPosition(true);
 
 #### Absolute Position
 
-The menu surface can use absolute positioning when being displayed. This requires that the element containing the 
-menu(`body` if using `hoistMenuToBody()`) has the `position: relative` style. 
+The menu surface can use absolute positioning when being displayed. This requires that the element containing the
+menu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.
 
 ```html
 <div class="mdc-menu-surface">
@@ -146,7 +146,7 @@ Mixin | Description
 --- | ---
 `mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.
 `mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.
-`mdc-menu-surface-corner-radius($radius)` | Sets the `border-radius` property of the `mdc-menu-surface`.
+`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 
 ## `MDCMenuSurface` Properties and Methods
 
@@ -216,7 +216,7 @@ Method Signature | Description
 `setAbsolutePosition(x: number, y: numnber) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.
 `handleBodyClick(event: Event) => void` | Method used as the callback function for the `click` event.
 `handleKeydown(event: Event) => void` | Method used as the callback function for the `keydown` events.
-`open() => void` | Opens the menu surface. 
+`open() => void` | Opens the menu surface.
 `close() => void` | Closes the menu.
 `isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.
 `setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.

packages/mdc-menu-surface/_mixins.scss

@@ -21,6 +21,7 @@
 //
 
 @import "@material/theme/mixins";
+@import "@material/shape/mixins";
 
 @mixin mdc-menu-surface-ink-color($color) {
   @include mdc-theme-prop(color, $color);
@@ -30,6 +31,6 @@
   @include mdc-theme-prop(background-color, $color);
 }
 
-@mixin mdc-menu-surface-corner-radius($radius) {
-  border-radius: $radius;
+@mixin mdc-menu-surface-shape-radius($radius, $rtl-reflexive: false) {
+  @include mdc-shape-radius($radius, $rtl-reflexive);
 }

packages/mdc-menu-surface/mdc-menu-surface.scss

@@ -33,7 +33,7 @@
   @include mdc-menu-surface-fill-color(surface);
   @include mdc-menu-surface-ink-color(on-surface);
   @include mdc-rtl-reflexive-property(transform-origin, top left, top right);
-  @include mdc-menu-surface-corner-radius(4px);
+  @include mdc-menu-surface-shape-radius(medium);
 
   display: none;
   position: absolute;

packages/mdc-menu-surface/package.json

@@ -18,6 +18,7 @@
     "@material/base": "^0.39.0",
     "@material/elevation": "^0.39.1",
     "@material/rtl": "^0.39.1",
+    "@material/shape": "^0.39.0",
     "@material/theme": "^0.39.1"
   },
   "publishConfig": {

packages/mdc-notched-outline/README.md

@@ -77,8 +77,8 @@ Mixin | Description
 `mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
 `mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
 `mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
-`mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.
-`mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.
+`mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
+`mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element in idle state with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 
 #### Calling Mixins with Parent Selectors
 

packages/mdc-notched-outline/_mixins.scss

@@ -21,6 +21,7 @@
 //
 
 @import "@material/theme/mixins";
+@import "@material/shape/mixins";
 
 @mixin mdc-notched-outline-idle-color($color) {
   .mdc-notched-outline__idle {
@@ -40,12 +41,12 @@
   }
 }
 
-@mixin mdc-notched-outline-corner-radius($radius) {
-  border-radius: $radius;
+@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
+  @include mdc-shape-radius($radius, $rtl-reflexive);
 }
 
-@mixin mdc-notched-outline-idle-corner-radius($radius) {
+@mixin mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive: false) {
   .mdc-notched-outline__idle {
-    border-radius: $radius;
+    @include mdc-shape-radius($radius, $rtl-reflexive);
   }
 }

packages/mdc-notched-outline/package.json

@@ -21,6 +21,7 @@
     "@material/animation": "^0.39.0",
     "@material/base": "^0.39.0",
     "@material/rtl": "^0.39.1",
+    "@material/shape": "^0.39.0",
     "@material/theme": "^0.39.1"
   }
 }

packages/mdc-select/README.md

@@ -199,10 +199,10 @@ Mixin | Description
 `mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.
 `mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
 `mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
-`mdc-select-corner-radius($radius)` | Customizes the corner radius of the filled variant of the select.
+`mdc-select-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed select variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
 `mdc-select-outline-color($color)` | Customizes the color of the notched outline.
-`mdc-select-outline-corner-radius($radius)` | Sets the border radius of of the outlined select variant.
+`mdc-select-outline-shape-radius($radius, $rtl-reflexive)` | Sets the border radius of of the outlined select variant. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-select-focused-outline-color($color)` | Customizes the color of the outline of the select when focused.
 `mdc-select-hover-outline-color($color)` | Customizes the color of the outline when the select is hovered.
 

packages/mdc-select/_mixins.scss

@@ -22,8 +22,11 @@
 
 @import "@material/floating-label/mixins";
 @import "@material/theme/mixins";
+@import "@material/shape/mixins";
+@import "@material/shape/functions";
 @import "@material/line-ripple/mixins";
 @import "@material/notched-outline/mixins";
+@import "./variables";
 
 // Public
 
@@ -89,22 +92,34 @@
   }
 }
 
-@mixin mdc-select-corner-radius($radius) {
-  border-radius: $radius $radius 0 0;
+@mixin mdc-select-shape-radius($radius, $rtl-reflexive: false) {
+  @if length($radius) > 2 {
+    @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
+  }
+
+  $masked-radius: mdc-shape-mask-radius($radius, 1 1 0 0);
+
+  &, &__native-control {
+    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $masked-radius), $rtl-reflexive);
+  }
 }
 
-@mixin mdc-select-outline-corner-radius($radius) {
+@mixin mdc-select-outline-shape-radius($radius, $rtl-reflexive: false) {
   // NOTE: idle and notched state border radius mixins
   // are broken into 2 different mixins, otherwise
   // we would be overly specific (big no, no). The cause of
   // this is because .mdc-notched-outline and .mdc-notched-outline__idle
   // are siblings. .mdc-notched-outline__idle needs to be a child of
   // .mdc-notched-outline in order to remedy this issue.
   .mdc-notched-outline {
-    @include mdc-notched-outline-corner-radius($radius);
+    @include mdc-notched-outline-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $radius), $rtl-reflexive);
   }
 
-  @include mdc-notched-outline-idle-corner-radius($radius);
+  @include mdc-notched-outline-idle-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $radius), $rtl-reflexive);
+
+  &__native-control {
+    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-select-height, $radius), $rtl-reflexive);
+  }
 }
 
 // Private

packages/mdc-select/_variables.scss

@@ -24,7 +24,7 @@
 
 $mdc-select-arrow-padding: 26px;
 $mdc-select-label-padding: 16px;
-$mdc-select-border-radius: 4px;
+$mdc-select-height: 56px;
 
 $mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
 $mdc-select-dropdown-color: mdc-theme-prop-value(on-surface);

packages/mdc-select/mdc-select.scss

@@ -45,6 +45,7 @@
   @include mdc-select-ink-color($mdc-select-ink-color);
   @include mdc-select-label-color($mdc-select-label-color);
   @include mdc-select-bottom-line-color($mdc-select-bottom-line-idle-color);
+  @include mdc-select-shape-radius(medium);
 
   // Focused state colors
   @include mdc-select-focused-bottom-line-color(primary);
@@ -58,8 +59,7 @@
   display: inline-flex;
   position: relative;
   box-sizing: border-box;
-  height: 56px;
-  border-radius: 4px 4px 0 0;
+  height: $mdc-select-height;
   background-repeat: no-repeat;
   background-position: right 10px center;
   overflow: hidden;
@@ -100,7 +100,6 @@
     padding-bottom: 4px;
     border: none;
     border-bottom: 1px solid;
-    border-radius: 4px 4px 0 0;
     outline: none;
     background-color: transparent;
     color: inherit; // Override default user agent stylesheet
@@ -124,7 +123,7 @@
   @include mdc-select-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-select-outlined-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-outlined);
-  @include mdc-select-outline-corner-radius($mdc-select-border-radius);
+  @include mdc-select-outline-shape-radius(medium);
   @include mdc-states-base-color(transparent);
   @include mdc-select-container-fill-color(transparent);
 

packages/mdc-select/package.json

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

packages/mdc-shape/README.md

@@ -72,7 +72,6 @@ Function | Description
 --- | ---
 `mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.
 `mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.
-`mdc-shape-mask-top-radius($radius)` | Accepts radius number or list of 2 radius values and returns 4 value list with top-left value, top-right value, bottom-right 0, bottom-left 0. Throws error when length of radius is more than 2.
 `mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.
 
 ### Additional Information