Skip to content

Commit cce753a

Browse files
crisbetocrisbeto
committed
fix(material/core): default font family not picked up in define-typography-config
The `define-typography-config` function was set up so that if a level doesn't have a `font-family`, it would pick up the one that was passed into the function. The problem is that after we switched the typography over to MDC, we started using the `typography-config-level-from-mdc` function which provides a default `font-family` which meant that the default passed into `define-typography-config` was being ignored. These changes add some logic that allows us to take the default font family, if it is specified. Fixes #25780.
1 parent a0ec4be commit cce753a

File tree

2 files changed

+81
-86
lines changed

2 files changed

+81
-86
lines changed

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +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) {
87+
@function typography-config-level-from-mdc($mdc-level, $overrides: ()) {
8888
$mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
8989

9090
@return typography.define-typography-level(
91-
map.get($mdc-level-config, font-size),
92-
map.get($mdc-level-config, line-height),
93-
map.get($mdc-level-config, font-weight),
94-
map.get($mdc-level-config, font-family),
95-
map.get($mdc-level-config, letter-spacing));
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)
97+
);
9698
}
9799

98100
// Configures MDC's global variables to reflect the given theme, applies the given styles,

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

Lines changed: 73 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -88,49 +88,52 @@
8888
@function define-typography-config(
8989
// TODO(mmalerba): rename this function to define-typography-config,
9090
// and create a predefined px based config for people that need it.
91-
$font-family: mdc-typography.$font-family,
92-
$headline-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
93-
$headline-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
94-
$headline-3: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
95-
$headline-4: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
96-
$headline-5: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
97-
$headline-6: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
98-
$subtitle-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
99-
$subtitle-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
100-
$body-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
101-
$body-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
102-
$caption: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
103-
$button: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
104-
$overline: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
91+
$font-family: null,
92+
$headline-1: null,
93+
$headline-2: null,
94+
$headline-3: null,
95+
$headline-4: null,
96+
$headline-5: null,
97+
$headline-6: null,
98+
$subtitle-1: null,
99+
$subtitle-2: null,
100+
$body-1: null,
101+
$body-2: null,
102+
$caption: null,
103+
$button: null,
104+
$overline: null,
105105
) {
106106
// Declare an initial map with all of the levels.
107-
$config: (
108-
headline-1: $headline-1,
109-
headline-2: $headline-2,
110-
headline-3: $headline-3,
111-
headline-4: $headline-4,
112-
headline-5: $headline-5,
113-
headline-6: $headline-6,
114-
subtitle-1: $subtitle-1,
115-
subtitle-2: $subtitle-2,
116-
body-1: $body-1,
117-
body-2: $body-2,
118-
caption: $caption,
119-
button: $button,
120-
overline: $overline,
121-
);
107+
$overrides: if($font-family, (font-family: $font-family), ());
122108

123-
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
124-
// Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
125-
@each $key, $level in $config {
126-
@if map.get($level, font-family) == null {
127-
$new-level: map.merge($level, (font-family: $font-family));
128-
$config: map.merge($config, ($key: $new-level));
129-
}
130-
}
131-
132-
// Add the base font family to the config.
133-
@return map.merge($config, (font-family: $font-family));
109+
@return (
110+
headline-1: $headline-1 or _rem-to-px(
111+
mdc-helpers.typography-config-level-from-mdc(headline1, $overrides)),
112+
headline-2: $headline-2 or _rem-to-px(
113+
mdc-helpers.typography-config-level-from-mdc(headline2, $overrides)),
114+
headline-3: $headline-3 or _rem-to-px(
115+
mdc-helpers.typography-config-level-from-mdc(headline3, $overrides)),
116+
headline-4: $headline-4 or _rem-to-px(
117+
mdc-helpers.typography-config-level-from-mdc(headline4, $overrides)),
118+
headline-5: $headline-5 or _rem-to-px(
119+
mdc-helpers.typography-config-level-from-mdc(headline5, $overrides)),
120+
headline-6: $headline-6 or _rem-to-px(
121+
mdc-helpers.typography-config-level-from-mdc(headline6, $overrides)),
122+
subtitle-1: $subtitle-1 or _rem-to-px(
123+
mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides)),
124+
subtitle-2: $subtitle-2 or _rem-to-px(
125+
mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides)),
126+
body-1: $body-1 or _rem-to-px(
127+
mdc-helpers.typography-config-level-from-mdc(body1, $overrides)),
128+
body-2: $body-2 or _rem-to-px(
129+
mdc-helpers.typography-config-level-from-mdc(body2, $overrides)),
130+
caption: $caption or _rem-to-px(
131+
mdc-helpers.typography-config-level-from-mdc(caption, $overrides)),
132+
button: $button or _rem-to-px(
133+
mdc-helpers.typography-config-level-from-mdc(button, $overrides)),
134+
overline: $overline or _rem-to-px(
135+
mdc-helpers.typography-config-level-from-mdc(overline, $overrides)),
136+
);
134137
}
135138

136139
/// Generates an Angular Material typography config based on values from the official Material
@@ -158,49 +161,39 @@
158161
@function define-rem-typography-config(
159162
// TODO(mmalerba): rename this function to define-typography-config,
160163
// and create a predefined px based config for people that need it.
161-
$font-family: mdc-typography.$font-family,
162-
$headline-1: mdc-helpers.typography-config-level-from-mdc(headline1),
163-
$headline-2: mdc-helpers.typography-config-level-from-mdc(headline2),
164-
$headline-3: mdc-helpers.typography-config-level-from-mdc(headline3),
165-
$headline-4: mdc-helpers.typography-config-level-from-mdc(headline4),
166-
$headline-5: mdc-helpers.typography-config-level-from-mdc(headline5),
167-
$headline-6: mdc-helpers.typography-config-level-from-mdc(headline6),
168-
$subtitle-1: mdc-helpers.typography-config-level-from-mdc(subtitle1),
169-
$subtitle-2: mdc-helpers.typography-config-level-from-mdc(subtitle2),
170-
$body-1: mdc-helpers.typography-config-level-from-mdc(body1),
171-
$body-2: mdc-helpers.typography-config-level-from-mdc(body2),
172-
$caption: mdc-helpers.typography-config-level-from-mdc(caption),
173-
$button: mdc-helpers.typography-config-level-from-mdc(button),
174-
$overline: mdc-helpers.typography-config-level-from-mdc(overline),
164+
$font-family: null,
165+
$headline-1: null,
166+
$headline-2: null,
167+
$headline-3: null,
168+
$headline-4: null,
169+
$headline-5: null,
170+
$headline-6: null,
171+
$subtitle-1: null,
172+
$subtitle-2: null,
173+
$body-1: null,
174+
$body-2: null,
175+
$caption: null,
176+
$button: null,
177+
$overline: null,
175178
) {
176179
// Declare an initial map with all of the levels.
177-
$config: (
178-
headline-1: $headline-1,
179-
headline-2: $headline-2,
180-
headline-3: $headline-3,
181-
headline-4: $headline-4,
182-
headline-5: $headline-5,
183-
headline-6: $headline-6,
184-
subtitle-1: $subtitle-1,
185-
subtitle-2: $subtitle-2,
186-
body-1: $body-1,
187-
body-2: $body-2,
188-
caption: $caption,
189-
button: $button,
190-
overline: $overline,
191-
);
180+
$overrides: if($font-family, (font-family: $font-family), ());
192181

193-
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
194-
// Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
195-
@each $key, $level in $config {
196-
@if map.get($level, font-family) == null {
197-
$new-level: map.merge($level, (font-family: $font-family));
198-
$config: map.merge($config, ($key: $new-level));
199-
}
200-
}
201-
202-
// Add the base font family to the config.
203-
@return map.merge($config, (font-family: $font-family));
182+
@return (
183+
headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1, $overrides),
184+
headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2, $overrides),
185+
headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3, $overrides),
186+
headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4, $overrides),
187+
headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5, $overrides),
188+
headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6, $overrides),
189+
subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides),
190+
subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides),
191+
body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1, $overrides),
192+
body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2, $overrides),
193+
caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption, $overrides),
194+
button: $button or mdc-helpers.typography-config-level-from-mdc(button, $overrides),
195+
overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline, $overrides),
196+
);
204197
}
205198

206199
@mixin private-all-unmigrated-component-typographies($config) {

0 commit comments

Comments
 (0)