fix(ripple): Correct unbounded ripple diameter (#1098)

Closes #1067
material-components · Aug 24, 2017 · 0f1ca35 · 0f1ca35
1 parent 6ffed49
commit 0f1ca35
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js
@@ -471,7 +471,7 @@ export default class MDCRippleFoundation extends MDCFoundation {
     this.frame_ = this.adapter_.computeBoundingRect();
 
     const maxDim = Math.max(this.frame_.height, this.frame_.width);
-    const surfaceDiameter = Math.sqrt(Math.pow(this.frame_.width, 2) + Math.pow(this.frame_.height, 2));
+    const surfaceDiameter = Math.min(this.frame_.width, this.frame_.height);
 
     // 60% of the largest dimension of the surface
     this.initialSize_ = maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE;

diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -93,8 +93,10 @@
     cursor: pointer;
   }
 
-  &__icon:last-of-type {
-    padding-right: 16px;
+  @media (min-width: $mdc-toolbar-mobile-breakpoint) {
+    &__icon:last-of-type {
+      margin-right: 8px;
+    }
   }
 
   &__icon--menu {
@@ -115,10 +117,6 @@
     padding: 16px;
   }
 
-  .mdc-toolbar__icon:last-child {
-    padding: 16px 8px;
-  }
-
   .mdc-toolbar__title {
     margin-left: 16px !important;
   }

diff --git a/test/unit/mdc-ripple/foundation.test.js b/test/unit/mdc-ripple/foundation.test.js
@@ -253,7 +253,7 @@ testFoundation(`#layout sets ${strings.VAR_FG_SCALE} based on the difference bet
 
   const maxSize = Math.max(width, height);
   const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;
-  const surfaceDiameter = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+  const surfaceDiameter = Math.min(width, height);
   const maxRadius = surfaceDiameter + numbers.PADDING;
   const fgScale = maxRadius / initialSize;