feat(elevation): Update elevation mixins (#5304)

* feat(elevation): Update elevation mixins * WIP update from review * WIP update from review
material-components · Dec 4, 2019 · ba879b6 · ba879b6
1 parent a5dbd8a
commit ba879b6
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 16 deletions.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -388,7 +388,7 @@ $query: mdc-feature-all()) {
   @include mdc-typography(button, $query);
   @include mdc-button-horizontal-padding($mdc-button-horizontal-padding, $query);
   @include mdc-elevation-overlay-surface-position($query: $query);
-  @include mdc-elevation-overlay-size(100%, $query: $query);
+  @include mdc-elevation-overlay-dimensions(100%, $query: $query);
 
   @include mdc-feature-targets($feat-structure) {
     display: inline-flex;

diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
@@ -66,7 +66,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
     @include mdc-chip-density($density-scale: 0, $query: $query);
     @include mdc-chip-leading-icon-margin($query: $query);
     @include mdc-elevation-overlay-surface-position($query: $query);
-    @include mdc-elevation-overlay-size(100%, $query: $query);
+    @include mdc-elevation-overlay-dimensions(100%, $query: $query);
 
     @include mdc-feature-targets($feat-structure) {
       display: inline-flex;

diff --git a/packages/mdc-dialog/_mixins.scss b/packages/mdc-dialog/_mixins.scss
@@ -100,7 +100,7 @@
 
   .mdc-dialog__surface {
     @include mdc-elevation-overlay-surface-position($query: $query);
-    @include mdc-elevation-overlay-size(100%, $query: $query);
+    @include mdc-elevation-overlay-dimensions(100%, $query: $query);
     @include mdc-elevation(24, $query: $query);
 
     @include mdc-feature-targets($feat-structure) {

diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md
@@ -94,7 +94,7 @@ Mixin | Description
 `mdc-elevation-overlay-common` | Called once per application to setup the universal elevation overlay styles
 `mdc-elevation-shadow($box-shadow)` | Sets the `box-shadow` of the closest parent selector
 `mdc-elevation-overlay-surface-position` | Sets the positioning of the overlay's surface element so that the overlay can be appropriately centered
-`mdc-elevation-overlay-size($width, $height: $width)` | Sets the width and height of the elevation overlay
+`mdc-elevation-overlay-dimensions($width, $height: $width, $has-content-sizing: true)` | Sets the dimensions of the elevation overlay
 `mdc-elevation-overlay-fill-color($color)` | Sets the color of the elevation overlay
 `mdc-elevation-overlay-opacity($opacity)` | Sets the opacity of the elevation overlay
 

diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss
@@ -60,10 +60,6 @@
     @include mdc-feature-targets($feat-structure) {
       @include mdc-base-emit-once("mdc-elevation/common/structure") {
         position: absolute;
-        top: 50%;
-        /* @noflip */
-        left: 50%;
-        transform: translate(-50%, -50%);
         border-radius: inherit;
         opacity: 0;
         pointer-events: none;
@@ -109,18 +105,30 @@
 }
 
 ///
-/// Sets the elevation overlay size.
+/// Sets the dimensions of the elevation overlay, including positioning and sizing.
 ///
-/// @param {Number} $width - The width of the elevation overlay.
-/// @param {Number} $height [$width] - The height of the elevation overlay.
+/// @param {Number} $width - The width of the elevation overlay
+/// @param {Number} [$height] - The height of the elevation overlay
+/// @param {Boolean} [$has-content-sizing] - Set to false if the container has no content sizing
 ///
-@mixin mdc-elevation-overlay-size($width, $height: $width, $query: mdc-feature-all()) {
+@mixin mdc-elevation-overlay-dimensions($width, $height: $width, $has-content-sizing: true, $query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-elevation-overlay-selector_ {
     @include mdc-feature-targets($feat-structure) {
       width: $width;
       height: $height;
+
+      @if $has-content-sizing {
+        top: 0;
+        /* @noflip */
+        left: 0;
+      } @else {
+        top: 50%;
+        /* @noflip */
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
   }
 }

diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss
@@ -235,7 +235,7 @@ $mdc-fab-icon-enter-duration_: 180ms;
 
 @mixin mdc-fab-base_($query: mdc-feature-all()) {
   @include mdc-elevation-overlay-surface-position($query: $query);
-  @include mdc-elevation-overlay-size(100%, $query: $query);
+  @include mdc-elevation-overlay-dimensions(100%, $query: $query);
   @include mdc-elevation(6, $query: $query);
   @include mdc-fab-shape-radius(50%, $query: $query);
 

diff --git a/packages/mdc-menu/_mixins.scss b/packages/mdc-menu/_mixins.scss
@@ -48,8 +48,8 @@
     // Include mdc-list selector to ensure list-inside-menu overrides default list styles
     .mdc-list {
       @include mdc-list-item-primary-text-ink-color($mdc-menu-ink-color, $query);
-      // @include mdc-elevation-overlay-surface-position($query: $query);
-      // @include mdc-elevation-overlay-size(100%, $query: $query);
+      @include mdc-elevation-overlay-surface-position($query: $query);
+      @include mdc-elevation-overlay-dimensions(100%, $query: $query);
     }
 
     .mdc-list-divider {

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -155,7 +155,7 @@
     @include mdc-elevation(0, $query: $query);
     @include mdc-elevation-shadow(none, $query: $query);
     @include mdc-elevation-overlay-parent($query: $query);
-    @include mdc-elevation-overlay-size(100%, $query: $query);
+    @include mdc-elevation-overlay-dimensions(100%, $query: $query);
     @include mdc-elevation-overlay-fill-color(red, $query: $query);
     @include mdc-elevation-overlay-opacity(99%, $query: $query);