Skip to content

Commit 714eac3

Browse files
authored
fix(material/button): remove duplicate typography styles from FAB (#28258)
The FAB was already tokenized some time ago, but we still included typography styles both through the `without-ripple` mixin in the theme and the `static-styles` in the base component styles. These changes remove the unnecessary styles and re-add the font smoothing since it can affect internal tests.
1 parent a962bb7 commit 714eac3

File tree

2 files changed

+9
-13
lines changed

2 files changed

+9
-13
lines changed

src/material/button/_fab-theme.scss

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@use 'sass:map';
2-
@use '@material/fab/fab' as mdc-fab;
32
@use '@material/fab/fab-theme' as mdc-fab-theme;
43
@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
5-
@use '../core/mdc-helpers/mdc-helpers';
64
@use '../core/style/sass-utils';
75
@use '../core/theming/theming';
86
@use '../core/theming/inspection';
@@ -73,13 +71,8 @@
7371
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
7472
}
7573
@else {
76-
@include mdc-helpers.using-mdc-typography($theme) {
77-
@include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
78-
}
79-
80-
$typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
8174
@include sass-utils.current-selector-or-root() {
82-
@include mdc-extended-fab-theme.theme($typography-tokens);
75+
@include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
8376
}
8477
}
8578
}

src/material/button/fab.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '@material/fab' as mdc-fab;
22
@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
33
@use '@material/fab/fab-theme' as mdc-fab-theme;
4+
@use '@material/typography/typography' as mdc-typography;
45
@use '@material/theme/custom-properties' as mdc-custom-properties;
56

67
@use './button-base';
@@ -17,17 +18,19 @@
1718
$mdc-fab-token-slots: tokens-mdc-fab.get-token-slots();
1819
$mdc-extended-fab-token-slots: tokens-mdc-extended-fab.get-token-slots();
1920

20-
// Add the MDC fab static styles.
21-
@include mdc-fab.static-styles();
21+
// Note: it's important to pass the query here, otherwise MDC generates
22+
// some unnecessary typography styles for the extended FAB.
23+
@include mdc-fab.static-styles($query: mdc-helpers.$mdc-base-styles-query);
2224

23-
// Add default values for tokens that aren't outputted by the theming API.
2425
.mat-mdc-fab, .mat-mdc-mini-fab {
25-
// Add the official slots for the MDC fab.
2626
@include mdc-fab-theme.theme-styles($mdc-fab-token-slots);
2727
}
2828

2929
.mat-mdc-extended-fab {
30-
// Add the official slots for the MDC fab.
30+
// Before tokens MDC included the font smoothing automatically, but with
31+
// tokens it doesn't. We add it since it can cause tiny differences in
32+
// screenshot tests and it generally looks better.
33+
@include mdc-typography.smooth-font();
3134
@include mdc-extended-fab-theme.theme-styles($mdc-extended-fab-token-slots);
3235
}
3336
}

0 commit comments

Comments
 (0)