feat(shape): Added new Shape APIs

.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

packages/mdc-shape/README.md

@@ -16,8 +16,7 @@ path: /catalog/shape/
 
 Shapes direct attention, identify components, communicate state, and express brand.
 
-Many MDC Web components include direct support for rounded corners; this package provides additional support for
-applying angled corners to unelevated surfaces.
+> Currently shape system for web only supports rounded corners.
 
 ## Design & API Documentation
 
@@ -36,74 +35,50 @@ applying angled corners to unelevated surfaces.
 npm install @material/shape
 ```
 
-## Basic Usage
+## Usage
 
-### HTML
+### Shapes for fixed height components
 
-The markup for angled corners involves a container element, and one element per angled corner.
+Styles for applying shape to button component looks like this.
 
-The following example demonstrates angled corners applied to a MDC Button, but this technique may be applied to any
-unelevated component.
-
-```html
-<div class="mdc-shape-container my-shape-container">
-  <button class="mdc-button mdc-button--unelevated">Button</button>
-  <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
-  <div class="mdc-shape-container__corner mdc-shape-container__corner--top-right"></div>
-  <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-right"></div>
-  <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-left"></div>
-</div>
+```scss
+@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));
 ```
 
-> **Note:** Each angled corner should have its own `<div>` element. Any corner that will not be cut (i.e. its size is 0)
-> does not need a dedicated element.
+Where, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.
 
-### Styles
+### Shapes for dynamic height components
 
-```scss
-@import "@material/shape/mdc-shape"; // The base shape styles need to be imported once in the page or application
-@import "@material/shape/mixins";
+Styles for applying shapes to dynamic height component like card looks like this:
 
-.my-shape-container {
-  @include mdc-shape-angled-corner(#fff, 10px);
-}
+```scss
+@include mdc-shape-radius($radius);
 ```
 
-## Variants
+Where, `$radius` is absolute value only.
 
-### Outlined Angled Corners
+### Shapes for components on specific corners
 
-Outlined angled corners involve the same markup and styles/imports as above, with the addition of including a mixin for
-outline:
+Styles for applying shapes for specific corners such as drawer looks like this:
 
 ```scss
-.my-shape-container {
-  @include mdc-shape-angled-corner(#fff, 10px);
-  @include mdc-shape-angled-corner-outline(2px, blue);
-}
+@include mdc-shape-radius((0, $radius, $radius, 0), $rtl-reflexive: true);
 ```
 
-## Style Customization
-
-### CSS Classes
-
-CSS Class | Description
---- | ---
-`mdc-shape-container` | Mandatory. Parent element containing the component to be masked.
-`mdc-shape-container__corner` | Mandatory. Element for masking a specific corner; there may be up to 4.
-`mdc-shape-container__corner--bottom-left` | Element for masking the bottom left corner of the component.
-`mdc-shape-container__corner--bottom-right` | Element for masking the bottom right corner of the component.
-`mdc-shape-container__corner--top-left` | Element for masking the top left corner of the component.
-`mdc-shape-container__corner--top-right` | Element for masking the top right corner of the component.
+Where, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.
 
 ### Sass Mixins
 
 Mixin | Description
 --- | ---
-`mdc-shape-angled-corner($background-color, $top-left-size[, $top-right-size, $bottom-right-size, $bottom-left-size])` | Applies styles for masking angled corners, using the given background color and corner sizes. If fewer than 4 corner sizes are specified, the mixin automatically determines the other corners similarly to CSS `border-radius`.
-`mdc-shape-angled-corner-background($background-color)` | Sets the background color used to mask angled corners. Useful for styling a subset of components in a section with a different background color.
-`mdc-shape-angled-corner-outline($outline-width, $outline-color[, $outline-style])` | Applies outline styles to angled corners. `$outline-style` defaults to `solid`.
+`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.
 
-> **Note:** When mentioned above, "background color" specifically refers to the color of the background behind the surface (_not_ the fill color of the surface). These mixins operate by masking the corners of the surface to match the background.
+> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.
 
-> **Note:** These mixins should be included in the context of the container element (or an ancestor) in order to apply styles to the corner elements.
+### Sass Functions
+
+Function | Description
+--- | ---
+`mdc-shape-flip-radius($radius)` | Function that flips the radius in RTL context. $radius is list of corner values it can be length of 4, 3 or 2.
+`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Function that calculates the absolute radius value based on its component height. Use this for fixed height components only.
+`mdc-shape-prop-value($radius)` | Returns radius value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of 4.