fix(button): stroked button crops applied badges (#13912)

Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep #13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes #13909

Author: devversion

src/demo-app/badge/badge-demo.html

@@ -52,6 +52,10 @@ <h3>Buttons</h3>
       <mat-icon color="primary">home</mat-icon>
     </button>
 
+    <button mat-stroked-button [matBadge]="badgeContent">
+      <mat-icon color="primary">home</mat-icon>
+    </button>
+
     <button disabled mat-raised-button [matBadge]="badgeContent" matBadgeDisabled>
       <mat-icon color="primary">home</mat-icon>
     </button>

src/lib/button/_button-base.scss

@@ -17,6 +17,7 @@ $mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
 // button's padding.
 $mat-stroked-button-line-height: $mat-button-line-height - 2;
 $mat-stroked-button-padding: 0 15px;
+$mat-stroked-button-border-width: 1px;
 
 // Icon Button standards
 $mat-icon-button-size: 40px !default;

src/lib/button/button.scss

@@ -42,20 +42,22 @@
 }
 
 .mat-stroked-button {
-  border: 1px solid currentColor;
+  border: $mat-stroked-button-border-width solid currentColor;
   padding: $mat-stroked-button-padding;
   line-height: $mat-stroked-button-line-height;
 
   // Since the stroked button has has an actual border that reduces the available space for
-  // child elements (such as the ripple container or focus overlay), an inherited border radius
-  // for absolute positioned child elements which expand to the parent element boundaries, will
-  // not align with the stroked button border because the child element cannot expand to the same
-  // boundaries as the parent element with a border.
-  // See: https://github.com/angular/material2/issues/13738
-  overflow: hidden;
-
+  // child elements such as the ripple container or focus overlay, an inherited border radius
+  // for the absolute-positioned child elements does not work properly. This is because the
+  // child element cannot expand to the same boundaries as the parent element with a border.
+  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
+  // to fully cover the actual button element. This means that the border-radius would be correct
+  // then. See: https://github.com/angular/material2/issues/13738
   .mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
-    border-radius: 0;
+    top: -$mat-stroked-button-border-width;
+    left: -$mat-stroked-button-border-width;
+    right: -$mat-stroked-button-border-width;
+    bottom: -$mat-stroked-button-border-width;
   }
 }