Skip to content

Commit 3c243da

Browse files
crisbetocrisbeto
committed
fix(material/core): default font family not applied to custom typography levels (#26394)
Fixes the following regressions with the new typography config: * After #25789, the top-level font family wasn't being applied to the individual levels anymore. * Custom typography levels were defaulting to a `null` font family while the default ones were defaulting to `Roboto` which was inconsistent. Now they both default to `Roboto` like they did in the legacy config. I've also set up tests for the config since changing the logic can be annoying to debug. Fixes #26387. (cherry picked from commit 20841a8)
1 parent 99dcdb2 commit 3c243da

File tree

4 files changed

+171
-58
lines changed

4 files changed

+171
-58
lines changed

‎src/material/core/mdc-helpers/_mdc-helpers.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,16 +84,17 @@ $mat-typography-mdc-level-mappings: (
8484
}
8585

8686
// Converts an MDC typography level config to an Angular Material one.
87-
@function typography-config-level-from-mdc($mdc-level, $overrides: ()) {
87+
@function typography-config-level-from-mdc($mdc-level) {
8888
$mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
8989

90+
// Explicitly set the font family to null since we'll apply it globally
91+
// through the `define-typgraphy-config`/`define-legacy-typography-config`.
9092
@return typography.define-typography-level(
91-
$font-size: map.get($overrides, font-size) or map.get($mdc-level-config, font-size),
92-
$font-family: map.get($overrides, font-family) or map.get($mdc-level-config, font-family),
93-
$line-height: map.get($overrides, line-height) or map.get($mdc-level-config, line-height),
94-
$font-weight: map.get($overrides, font-weight) or map.get($mdc-level-config, font-weight),
95-
$letter-spacing:
96-
map.get($overrides, letter-spacing) or map.get($mdc-level-config, letter-spacing)
93+
$font-family: null,
94+
$font-size: map.get($mdc-level-config, font-size),
95+
$line-height: map.get($mdc-level-config, line-height),
96+
$font-weight: map.get($mdc-level-config, font-weight),
97+
$letter-spacing: map.get($mdc-level-config, letter-spacing)
9798
);
9899
}
99100

‎src/material/core/theming/tests/BUILD.bazel

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,22 @@ sass_binary(
4545
deps = ["//src/material:sass_lib"],
4646
)
4747

48+
# Sass binary that asserts that setting the font family for a typography config works as expected.
49+
sass_binary(
50+
name = "test-typography-font-family",
51+
testonly = True,
52+
src = "test-typography-font-family.scss",
53+
deps = ["//src/material:sass_lib"],
54+
)
55+
4856
build_test(
4957
name = "sass_compile_tests",
5058
targets = [
5159
":test-css-variables-theme",
5260
":test-theming-api",
5361
":test-theming-bundle",
5462
":test-legacy-theming-bundle",
63+
":test-typography-font-family",
5564
],
5665
)
5766

‎src/material/core/theming/tests/test-typography-font-family.scss

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@use '@material/typography' as mdc-typography;
2+
@use '../../typography/all-typography';
3+
@use '../../typography/typography';
4+
@use 'sass:map';
5+
@use 'sass:meta';
6+
7+
@function assert-font-family($test-name, $obj, $expected) {
8+
@each $level-name, $level in $obj {
9+
@if (meta.type-of($level) == 'map' and map.get($level, 'font-family') != $expected) {
10+
@error '[#{$test-name}]: Incorrect font-family in level "#{$level-name}". ' +
11+
'Expected "#{$expected}", but received "#{map.get($level, 'font-family')}".';
12+
}
13+
}
14+
@return $obj;
15+
}
16+
17+
$no-font-family: assert-font-family(
18+
'should take default MDC font family if none is specified',
19+
all-typography.define-typography-config(),
20+
mdc-typography.$font-family);
21+
22+
$only-top-level-font-family: assert-font-family(
23+
'should take custom font family if specified at top level',
24+
all-typography.define-typography-config($font-family: 'custom-top'),
25+
'custom-top');
26+
27+
$individual-levels-without-font-families: assert-font-family(
28+
'should set the default MDC font family if all keys are specified, but without a font-family',
29+
all-typography.define-typography-config(
30+
$headline-1: typography.define-typography-level($font-size: 1px),
31+
$headline-2: typography.define-typography-level($font-size: 1px),
32+
$headline-3: typography.define-typography-level($font-size: 1px),
33+
$headline-4: typography.define-typography-level($font-size: 1px),
34+
$headline-5: typography.define-typography-level($font-size: 1px),
35+
$headline-6: typography.define-typography-level($font-size: 1px),
36+
$subtitle-1: typography.define-typography-level($font-size: 1px),
37+
$subtitle-2: typography.define-typography-level($font-size: 1px),
38+
$body-1: typography.define-typography-level($font-size: 1px),
39+
$body-2: typography.define-typography-level($font-size: 1px),
40+
$caption: typography.define-typography-level($font-size: 1px),
41+
$button: typography.define-typography-level($font-size: 1px),
42+
$overline: typography.define-typography-level($font-size: 1px),
43+
),
44+
mdc-typography.$font-family
45+
);
46+
47+
$individual-levels-without-font-families-with-top-level-family: assert-font-family(
48+
'should set a custom top-level font family if all keys are specified, but without a font-family',
49+
all-typography.define-typography-config(
50+
$font-family: 'custom-top',
51+
$headline-1: typography.define-typography-level($font-size: 1px),
52+
$headline-2: typography.define-typography-level($font-size: 1px),
53+
$headline-3: typography.define-typography-level($font-size: 1px),
54+
$headline-4: typography.define-typography-level($font-size: 1px),
55+
$headline-5: typography.define-typography-level($font-size: 1px),
56+
$headline-6: typography.define-typography-level($font-size: 1px),
57+
$subtitle-1: typography.define-typography-level($font-size: 1px),
58+
$subtitle-2: typography.define-typography-level($font-size: 1px),
59+
$body-1: typography.define-typography-level($font-size: 1px),
60+
$body-2: typography.define-typography-level($font-size: 1px),
61+
$caption: typography.define-typography-level($font-size: 1px),
62+
$button: typography.define-typography-level($font-size: 1px),
63+
$overline: typography.define-typography-level($font-size: 1px),
64+
),
65+
'custom-top'
66+
);
67+
68+
$individual-levels-with-font-families: assert-font-family(
69+
'should use the level font family if one is specified, but there is none at the top level',
70+
all-typography.define-typography-config(
71+
$headline-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
72+
$headline-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
73+
$headline-3: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
74+
$headline-4: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
75+
$headline-5: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
76+
$headline-6: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
77+
$subtitle-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
78+
$subtitle-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
79+
$body-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
80+
$body-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
81+
$caption: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
82+
$button: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
83+
$overline: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
84+
),
85+
'custom-level'
86+
);
87+
88+
$individual-levels-with-font-families-and-top-level-family: assert-font-family(
89+
'should use the level font family if a top-level one is specified together with it',
90+
all-typography.define-typography-config(
91+
$font-family: 'custom-top',
92+
$headline-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
93+
$headline-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
94+
$headline-3: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
95+
$headline-4: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
96+
$headline-5: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
97+
$headline-6: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
98+
$subtitle-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
99+
$subtitle-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
100+
$body-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
101+
$body-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
102+
$caption: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
103+
$button: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
104+
$overline: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
105+
),
106+
'custom-level'
107+
);

‎src/material/core/typography/_all-typography.scss

Lines changed: 47 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '@material/typography' as mdc-typography;
12
@use 'sass:map';
23
@use 'sass:math';
34
@use 'sass:meta';
@@ -62,6 +63,20 @@
6263
}
6364
}
6465

66+
// Applies the default font family to all levels in a typography config.
67+
@function _apply-font-family($font-family, $initial-config) {
68+
$config: $initial-config;
69+
70+
@each $key, $level in $config {
71+
@if map.get($level, 'font-family') == null {
72+
// Sass maps are immutable so we have to re-assign the variable each time.
73+
$config: map.set($config, $key, map.set($level, 'font-family', $font-family));
74+
}
75+
}
76+
77+
@return map.set($config, 'font-family', $font-family);
78+
}
79+
6580
/// Generates an Angular Material typography config based on values from the official Material
6681
/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
6782
/// the default values. The `mat-typography-level` function can be used to generate a custom
@@ -87,7 +102,7 @@
87102
@function define-typography-config(
88103
// TODO(mmalerba): rename this function to define-typography-config,
89104
// and create a predefined px based config for people that need it.
90-
$font-family: null,
105+
$font-family: mdc-typography.$font-family,
91106
$headline-1: null,
92107
$headline-2: null,
93108
$headline-3: null,
@@ -102,37 +117,21 @@
102117
$button: null,
103118
$overline: null,
104119
) {
105-
// Declare an initial map with all of the levels.
106-
$overrides: if($font-family, (font-family: $font-family), ());
107-
108-
@return (
109-
headline-1: $headline-1 or _rem-to-px(
110-
mdc-helpers.typography-config-level-from-mdc(headline1, $overrides)),
111-
headline-2: $headline-2 or _rem-to-px(
112-
mdc-helpers.typography-config-level-from-mdc(headline2, $overrides)),
113-
headline-3: $headline-3 or _rem-to-px(
114-
mdc-helpers.typography-config-level-from-mdc(headline3, $overrides)),
115-
headline-4: $headline-4 or _rem-to-px(
116-
mdc-helpers.typography-config-level-from-mdc(headline4, $overrides)),
117-
headline-5: $headline-5 or _rem-to-px(
118-
mdc-helpers.typography-config-level-from-mdc(headline5, $overrides)),
119-
headline-6: $headline-6 or _rem-to-px(
120-
mdc-helpers.typography-config-level-from-mdc(headline6, $overrides)),
121-
subtitle-1: $subtitle-1 or _rem-to-px(
122-
mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides)),
123-
subtitle-2: $subtitle-2 or _rem-to-px(
124-
mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides)),
125-
body-1: $body-1 or _rem-to-px(
126-
mdc-helpers.typography-config-level-from-mdc(body1, $overrides)),
127-
body-2: $body-2 or _rem-to-px(
128-
mdc-helpers.typography-config-level-from-mdc(body2, $overrides)),
129-
caption: $caption or _rem-to-px(
130-
mdc-helpers.typography-config-level-from-mdc(caption, $overrides)),
131-
button: $button or _rem-to-px(
132-
mdc-helpers.typography-config-level-from-mdc(button, $overrides)),
133-
overline: $overline or _rem-to-px(
134-
mdc-helpers.typography-config-level-from-mdc(overline, $overrides)),
135-
);
120+
@return _apply-font-family($font-family, (
121+
headline-1: $headline-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
122+
headline-2: $headline-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
123+
headline-3: $headline-3 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
124+
headline-4: $headline-4 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
125+
headline-5: $headline-5 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
126+
headline-6: $headline-6 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
127+
subtitle-1: $subtitle-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
128+
subtitle-2: $subtitle-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
129+
body-1: $body-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
130+
body-2: $body-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
131+
caption: $caption or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
132+
button: $button or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
133+
overline: $overline or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
134+
));
136135
}
137136

138137
/// Generates an Angular Material typography config based on values from the official Material
@@ -160,7 +159,7 @@
160159
@function define-rem-typography-config(
161160
// TODO(mmalerba): rename this function to define-typography-config,
162161
// and create a predefined px based config for people that need it.
163-
$font-family: null,
162+
$font-family: mdc-typography.$font-family,
164163
$headline-1: null,
165164
$headline-2: null,
166165
$headline-3: null,
@@ -175,24 +174,21 @@
175174
$button: null,
176175
$overline: null,
177176
) {
178-
// Declare an initial map with all of the levels.
179-
$overrides: if($font-family, (font-family: $font-family), ());
180-
181-
@return (
182-
headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1, $overrides),
183-
headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2, $overrides),
184-
headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3, $overrides),
185-
headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4, $overrides),
186-
headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5, $overrides),
187-
headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6, $overrides),
188-
subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides),
189-
subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides),
190-
body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1, $overrides),
191-
body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2, $overrides),
192-
caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption, $overrides),
193-
button: $button or mdc-helpers.typography-config-level-from-mdc(button, $overrides),
194-
overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline, $overrides),
195-
);
177+
@return _apply-font-family($font-family, (
178+
headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1),
179+
headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2),
180+
headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3),
181+
headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4),
182+
headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5),
183+
headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6),
184+
subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1),
185+
subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2),
186+
body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1),
187+
body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2),
188+
caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption),
189+
button: $button or mdc-helpers.typography-config-level-from-mdc(button),
190+
overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline),
191+
));
196192
}
197193

198194
// Includes all of the typographic styles.

0 commit comments

Comments
 (0)