From 5ca6311382760b5cc820308f35e6221ec8ec499c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 10 Sep 2021 14:04:37 +0200 Subject: [PATCH] fix(material-experimental/mdc-button): avoid shrinking FAB and icon button (#23532) Fixes that the width of the FAB and icon button can collapse. We have something similar in the existing buttons already. (cherry picked from commit c608df8cec6af28a5b0fb3d0e23f36ffdcb6b7c1) --- src/material-experimental/mdc-button/fab.scss | 3 +++ src/material-experimental/mdc-button/icon-button.scss | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss index 6add119bb32a..b93fe1dbcdf5 100644 --- a/src/material-experimental/mdc-button/fab.scss +++ b/src/material-experimental/mdc-button/fab.scss @@ -11,6 +11,9 @@ @include button-base.mat-private-button-touch-target(true); @include private.private-animation-noop(); + // Prevent the button from shrinking since it's always supposed to be a circle. + flex-shrink: 0; + // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator // styles and don't actually do anything. This undoes those conflicting styles. &:not(.mdc-ripple-upgraded):focus::before { diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss index 93d75f836c0a..379c22de9356 100644 --- a/src/material-experimental/mdc-button/icon-button.scss +++ b/src/material-experimental/mdc-button/icon-button.scss @@ -15,6 +15,9 @@ // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round. border-radius: 50%; + // Prevent the button from shrinking since it's always supposed to be a circle. + flex-shrink: 0; + @include button-base.mat-private-button-disabled(); @include button-base.mat-private-button-touch-target(true); @include private.private-animation-noop();