Skip to content

Commit 96b8f25

Browse files
wagnermacielwagnermaciel
authored
refactor(material/progress-spinner): change mat-progress-spinner to use MDC's token API (#26636)
1 parent fbca2e9 commit 96b8f25

File tree

5 files changed

+113
-55
lines changed

5 files changed

+113
-55
lines changed

‎src/material/core/tokens/m2/mdc/_circular-progress.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@use 'sass:map';
2+
@use '../../../theming/theming';
3+
@use '../../token-utils';
4+
5+
// The prefix used to generate the fully qualified name for tokens in this file.
6+
$prefix: (mdc, circular-progress);
7+
8+
// Tokens that can't be configured through Angular Material's current theming API,
9+
// but may be in a future version of the theming API.
10+
//
11+
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
12+
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
13+
// our CSS.
14+
@function get-unthemable-tokens() {
15+
@return (
16+
// The thickness of the progress spinner's active indicator.
17+
active-indicator-width: 4px,
18+
// The the diameter of the spinner
19+
size: 48px,
20+
// =============================================================================================
21+
// = TOKENS NOT USED IN ANGULAR MATERIAL =
22+
// =============================================================================================
23+
// Angular Material does not support four color spinners
24+
four-color-active-indicator-one-color: null,
25+
// Angular Material does not support four color spinners
26+
four-color-active-indicator-two-color: null,
27+
// Angular Material does not support four color spinners
28+
four-color-active-indicator-three-color: null,
29+
// Angular Material does not support four color spinners
30+
four-color-active-indicator-four-color: null
31+
);
32+
}
33+
34+
// Tokens that can be configured through Angular Material's color theming API.
35+
@function get-color-tokens($config) {
36+
@return (
37+
// The color of the progress spinner's active indicator.
38+
active-indicator-color: theming.get-color-from-palette(map.get($config, primary))
39+
);
40+
}
41+
42+
// Tokens that can be configured through Angular Material's typography theming API.
43+
@function get-typography-tokens($config) {
44+
@return ();
45+
}
46+
47+
// Tokens that can be configured through Angular Material's density theming API.
48+
@function get-density-tokens($config) {
49+
@return ();
50+
}
51+
52+
// Combines the tokens generated by the above functions into a single map with placeholder values.
53+
// This is used to create token slots.
54+
@function get-token-slots() {
55+
@return map.merge(
56+
get-unthemable-tokens(),
57+
map.merge(
58+
get-color-tokens(token-utils.$placeholder-color-config),
59+
map.merge(
60+
get-typography-tokens(token-utils.$placeholder-typography-config),
61+
get-density-tokens(token-utils.$placeholder-density-config)
62+
)
63+
)
64+
);
65+
}

‎src/material/core/tokens/tests/test-validate-tokens.scss

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@
22
@use 'sass:map';
33
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
44
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
5+
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
56
@use '@material/list/list-theme' as mdc-list-theme;
67
@use '@material/theme/validate' as mdc-validate;
8+
@use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
79
@use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
810
@use '../m2/mdc/list' as tokens-mdc-list;
911
@use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
1012

11-
@mixin validate-slots(
12-
$component,
13-
$slots,
14-
$reference
15-
) {
13+
@mixin validate-slots($component, $slots, $reference) {
1614
@debug 'Validating #{$component}...';
1715
// We don't care what the values are, just that every valid token is present in the slots map.
1816
// Specifically its ok if the token is explicitly mapped to `null`. We therefore replace all the
@@ -25,17 +23,23 @@
2523
}
2624

2725
@include validate-slots(
28-
$component: 'm2.mdc.list',
29-
$slots: tokens-mdc-list.get-token-slots(),
30-
$reference: mdc-list-theme.$light-theme
26+
$component: 'm2.mdc.list',
27+
$slots: tokens-mdc-list.get-token-slots(),
28+
$reference: mdc-list-theme.$light-theme
29+
);
30+
31+
@include validate-slots(
32+
$component: 'm2.mdc.circular-progress',
33+
$slots: tokens-mdc-circular-progress.get-token-slots(),
34+
$reference: mdc-circular-progress-theme.$light-theme
3135
);
3236
@include validate-slots(
33-
$component: 'm2.mdc.elevated-card',
34-
$slots: tokens-mdc-elevated-card.get-token-slots(),
35-
$reference: mdc-elevated-card-theme.$light-theme
37+
$component: 'm2.mdc.elevated-card',
38+
$slots: tokens-mdc-elevated-card.get-token-slots(),
39+
$reference: mdc-elevated-card-theme.$light-theme
3640
);
3741
@include validate-slots(
38-
$component: 'm2.mdc.outlined-card',
39-
$slots: tokens-mdc-outlined-card.get-token-slots(),
40-
$reference: mdc-outlined-card-theme.$light-theme
42+
$component: 'm2.mdc.outlined-card',
43+
$slots: tokens-mdc-outlined-card.get-token-slots(),
44+
$reference: mdc-outlined-card-theme.$light-theme
4145
);

‎src/material/progress-spinner/_progress-spinner-theme.scss

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
11
@use 'sass:map';
2-
@use '../core/mdc-helpers/mdc-helpers';
32
@use '../core/theming/theming';
3+
@use '../core/tokens/m2/mdc/circular-progress' as tokens-mdc-circular-progress;
44
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
55

6-
7-
@mixin _palette-styles($config, $palette) {
8-
$color: theming.get-color-from-palette(map.get($config, $palette));
9-
@include mdc-circular-progress-theme.theme((active-indicator-color: $color));
10-
}
11-
126
@mixin color($config-or-theme) {
137
$config: theming.get-color-config($config-or-theme);
14-
@include mdc-helpers.using-mdc-theme($config) {
15-
.mat-mdc-progress-spinner {
16-
@include _palette-styles($config, primary);
8+
$mdc-circular-progress-color-tokens: tokens-mdc-circular-progress.get-color-tokens($config);
179

18-
&.mat-accent {
19-
@include _palette-styles($config, accent);
20-
}
10+
.mat-mdc-progress-spinner {
11+
@include mdc-circular-progress-theme.theme($mdc-circular-progress-color-tokens);
12+
13+
&.mat-accent {
14+
$color: theming.get-color-from-palette(map.get($config, accent));
15+
@include mdc-circular-progress-theme.theme((active-indicator-color: $color));
16+
}
2117

22-
&.mat-warn {
23-
@include _palette-styles($config, warn);
24-
}
18+
&.mat-warn {
19+
$color: theming.get-color-from-palette(map.get($config, warn));
20+
@include mdc-circular-progress-theme.theme((active-indicator-color: $color));
2521
}
2622
}
2723
}

‎src/material/progress-spinner/progress-spinner.scss

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
1-
@use 'sass:map';
2-
@use '../core/mdc-helpers/mdc-helpers';
31
@use '@angular/cdk';
42
@use '@material/circular-progress/circular-progress' as mdc-circular-progress;
53
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
4+
@use '@material/theme/custom-properties' as mdc-custom-properties;
5+
@use '../core/tokens/m2/mdc/circular-progress' as m2-mdc-circular-progress;
66

7+
// The slots for tokens that will be configured in the theme can be emitted with no fallback.
8+
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
9+
$mdc-circular-progress-token-slots: m2-mdc-circular-progress.get-token-slots();
710

8-
@include mdc-helpers.disable-mdc-fallback-declarations {
9-
@include mdc-circular-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);
10-
}
11-
12-
.mat-mdc-progress-spinner {
13-
@include mdc-helpers.disable-mdc-fallback-declarations {
14-
@include mdc-circular-progress-theme.theme-styles(map.merge(
15-
mdc-circular-progress-theme.$light-theme,
16-
(
17-
active-indicator-color: transparent,
11+
// Add the MDC progress spinner static styles.
12+
@include mdc-circular-progress.static-styles();
1813

19-
// We don't support the multi color variant so we exclude these variables.
20-
four-color-active-indicator-four-color: null,
21-
four-color-active-indicator-one-color: null,
22-
four-color-active-indicator-three-color: null,
23-
four-color-active-indicator-two-color: null,
14+
.mat-mdc-progress-spinner {
15+
// Add the official slots for the MDC circular progress.
16+
@include mdc-circular-progress-theme.theme-styles($mdc-circular-progress-token-slots);
2417

25-
// We currently size the element ourselves so we can exclude these styles as well.
26-
// TODO(crisbeto): look into reusing MDC's styles by binding to a CSS variable
27-
// in our own template.
28-
active-indicator-width: null,
29-
size: null,
30-
)
31-
));
18+
// Add default values for tokens that aren't outputted by the theming API.
19+
@include mdc-circular-progress-theme.theme(m2-mdc-circular-progress.get-unthemable-tokens());
3220
}
21+
}
3322

23+
.mat-mdc-progress-spinner {
3424
// Explicitly set to `block` since the browser defaults custom elements to `inline`.
3525
display: block;
3626

@@ -43,7 +33,8 @@
4333
line-height: 0;
4434

4535
&._mat-animation-noopable {
46-
&, .mdc-circular-progress__determinate-circle {
36+
&,
37+
.mdc-circular-progress__determinate-circle {
4738
// The spinner itself has a transition on `opacity`.
4839
transition: none;
4940
}

‎src/material/progress-spinner/progress-spinner.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ const BASE_STROKE_WIDTH = 10;
8282
'[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
8383
'[style.width.px]': 'diameter',
8484
'[style.height.px]': 'diameter',
85+
'[style.--mdc-circular-progress-size]': 'diameter + "px"',
86+
'[style.--mdc-circular-progress-active-indicator-width]': 'diameter + "px"',
8587
'[attr.aria-valuemin]': '0',
8688
'[attr.aria-valuemax]': '100',
8789
'[attr.aria-valuenow]': 'mode === "determinate" ? value : null',

0 commit comments

Comments
 (0)