mat-stroked-button with matBadge is cropped

[tjaussoin-luna]

Bug, feature request, or proposal:

On a mat-stroked-button with a matBadge, the badge is cropped.

What is the expected behavior?

matBadge not cropped, like it is on a mat-button.

What is the current behavior?

matbadge is cropped.

What are the steps to reproduce?

Change the mat-raised-button to a mat-stroked-button here :
https://stackblitz.com/angular/gxraooqgqod?file=app%2Fbadge-overview-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7
Angular Material 7.0.2
Browser: Chrome

[devversion]

Good catch. This is caused by 4cdf5ba.

We should consider removing the overflow: hidden again, and just expanding the overlays by the amount of pixels the border takes up.

This is how it would be if we just remove the overflow and specify a border-radius for the underlying ripple container, and focus overlay.

[devversion]

As mentioned above, we could technically expand the focus-overlay and ripple container by the width of the border, in order to make sure that the border-radius on those two child elements match the border radius of the actual button HTML element. This way we could remove the overflow: hidden.

The trade-off here would be just that it won't work properly if someone changes the border-width of the stroked button. Any thoughts @crisbeto?

[crisbeto]

It should be fine, as long as we put the border width in a variable.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}