Skip to content

Commit 5ca6311

Browse files
crisbetoandrewseguin
authored andcommitted
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 c608df8)
1 parent 886522c commit 5ca6311

File tree

2 files changed

+6
-0
lines changed

2 files changed

+6
-0
lines changed

src/material-experimental/mdc-button/fab.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
@include button-base.mat-private-button-touch-target(true);
1212
@include private.private-animation-noop();
1313

14+
// Prevent the button from shrinking since it's always supposed to be a circle.
15+
flex-shrink: 0;
16+
1417
// MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
1518
// styles and don't actually do anything. This undoes those conflicting styles.
1619
&:not(.mdc-ripple-upgraded):focus::before {

src/material-experimental/mdc-button/icon-button.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
// Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
1616
border-radius: 50%;
1717

18+
// Prevent the button from shrinking since it's always supposed to be a circle.
19+
flex-shrink: 0;
20+
1821
@include button-base.mat-private-button-disabled();
1922
@include button-base.mat-private-button-touch-target(true);
2023
@include private.private-animation-noop();

0 commit comments

Comments
 (0)