fix(button): ripples not being clipped by button border radius (#11181)

crisbeto · jelbourn · commit 6e026d73f6cf · 2018-05-08T09:54:18.000-07:00
Fixes the ripple container having straight edges, despite the buttons having rounded ones, which causes the ripple container to stick out past the button edge. Fixes #11160.
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
@@ -73,6 +73,9 @@
   // will overlay the user content and we don't want to disable mouse events on the user content.
   // Pointer events can be safely disabled because the ripple trigger element is the host element.
   pointer-events: none;
+
+  // Inherit the border radius from the parent so the ripple is clipped when it reaches the edges.
+  border-radius: inherit;
 }
 
 // Element that overlays the button to show focus and hover effects.

Original file line number	Diff line number	Diff line change
`@@ -73,6 +73,9 @@`
`73`	`73`	`// will overlay the user content and we don't want to disable mouse events on the user content.`
`74`	`74`	`// Pointer events can be safely disabled because the ripple trigger element is the host element.`
`75`	`75`	`pointer-events: none;`
	`76`	`+`
	`77`	`+ // Inherit the border radius from the parent so the ripple is clipped when it reaches the edges.`
	`78`	`+ border-radius: inherit;`
`76`	`79`	`}`
`77`	`80`
`78`	`81`	`// Element that overlays the button to show focus and hover effects.`