Skip to content

Commit 0388de3

Browse files
crisbetocrisbeto
authored
refactor(material-experimental/mdc-progress-spinner): switch to new theming API (#25248)
Reworks the MDC progress spinner to use the new theming API based on CSS variables.
1 parent 22cb07b commit 0388de3

File tree

5 files changed

+653
-626
lines changed

5 files changed

+653
-626
lines changed

‎package.json

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -95,53 +95,53 @@
9595
"@bazel/terser": "5.5.2",
9696
"@bazel/worker": "5.5.2",
9797
"@firebase/app-types": "^0.7.0",
98-
"@material/animation": "15.0.0-canary.5b40eb988.0",
99-
"@material/auto-init": "15.0.0-canary.5b40eb988.0",
100-
"@material/banner": "15.0.0-canary.5b40eb988.0",
101-
"@material/base": "15.0.0-canary.5b40eb988.0",
102-
"@material/button": "15.0.0-canary.5b40eb988.0",
103-
"@material/card": "15.0.0-canary.5b40eb988.0",
104-
"@material/checkbox": "15.0.0-canary.5b40eb988.0",
105-
"@material/chips": "15.0.0-canary.5b40eb988.0",
106-
"@material/circular-progress": "15.0.0-canary.5b40eb988.0",
107-
"@material/data-table": "15.0.0-canary.5b40eb988.0",
108-
"@material/density": "15.0.0-canary.5b40eb988.0",
109-
"@material/dialog": "15.0.0-canary.5b40eb988.0",
110-
"@material/dom": "15.0.0-canary.5b40eb988.0",
111-
"@material/drawer": "15.0.0-canary.5b40eb988.0",
112-
"@material/elevation": "15.0.0-canary.5b40eb988.0",
113-
"@material/fab": "15.0.0-canary.5b40eb988.0",
114-
"@material/feature-targeting": "15.0.0-canary.5b40eb988.0",
115-
"@material/floating-label": "15.0.0-canary.5b40eb988.0",
116-
"@material/form-field": "15.0.0-canary.5b40eb988.0",
117-
"@material/icon-button": "15.0.0-canary.5b40eb988.0",
118-
"@material/image-list": "15.0.0-canary.5b40eb988.0",
119-
"@material/layout-grid": "15.0.0-canary.5b40eb988.0",
120-
"@material/line-ripple": "15.0.0-canary.5b40eb988.0",
121-
"@material/linear-progress": "15.0.0-canary.5b40eb988.0",
122-
"@material/list": "15.0.0-canary.5b40eb988.0",
123-
"@material/menu": "15.0.0-canary.5b40eb988.0",
124-
"@material/menu-surface": "15.0.0-canary.5b40eb988.0",
125-
"@material/notched-outline": "15.0.0-canary.5b40eb988.0",
126-
"@material/radio": "15.0.0-canary.5b40eb988.0",
127-
"@material/ripple": "15.0.0-canary.5b40eb988.0",
128-
"@material/rtl": "15.0.0-canary.5b40eb988.0",
129-
"@material/segmented-button": "15.0.0-canary.5b40eb988.0",
130-
"@material/select": "15.0.0-canary.5b40eb988.0",
131-
"@material/shape": "15.0.0-canary.5b40eb988.0",
132-
"@material/slider": "15.0.0-canary.5b40eb988.0",
133-
"@material/snackbar": "15.0.0-canary.5b40eb988.0",
134-
"@material/switch": "15.0.0-canary.5b40eb988.0",
135-
"@material/tab": "15.0.0-canary.5b40eb988.0",
136-
"@material/tab-bar": "15.0.0-canary.5b40eb988.0",
137-
"@material/tab-indicator": "15.0.0-canary.5b40eb988.0",
138-
"@material/tab-scroller": "15.0.0-canary.5b40eb988.0",
139-
"@material/textfield": "15.0.0-canary.5b40eb988.0",
140-
"@material/theme": "15.0.0-canary.5b40eb988.0",
141-
"@material/tooltip": "15.0.0-canary.5b40eb988.0",
142-
"@material/top-app-bar": "15.0.0-canary.5b40eb988.0",
143-
"@material/touch-target": "15.0.0-canary.5b40eb988.0",
144-
"@material/typography": "15.0.0-canary.5b40eb988.0",
98+
"@material/animation": "15.0.0-canary.02ecd4d85.0",
99+
"@material/auto-init": "15.0.0-canary.02ecd4d85.0",
100+
"@material/banner": "15.0.0-canary.02ecd4d85.0",
101+
"@material/base": "15.0.0-canary.02ecd4d85.0",
102+
"@material/button": "15.0.0-canary.02ecd4d85.0",
103+
"@material/card": "15.0.0-canary.02ecd4d85.0",
104+
"@material/checkbox": "15.0.0-canary.02ecd4d85.0",
105+
"@material/chips": "15.0.0-canary.02ecd4d85.0",
106+
"@material/circular-progress": "15.0.0-canary.02ecd4d85.0",
107+
"@material/data-table": "15.0.0-canary.02ecd4d85.0",
108+
"@material/density": "15.0.0-canary.02ecd4d85.0",
109+
"@material/dialog": "15.0.0-canary.02ecd4d85.0",
110+
"@material/dom": "15.0.0-canary.02ecd4d85.0",
111+
"@material/drawer": "15.0.0-canary.02ecd4d85.0",
112+
"@material/elevation": "15.0.0-canary.02ecd4d85.0",
113+
"@material/fab": "15.0.0-canary.02ecd4d85.0",
114+
"@material/feature-targeting": "15.0.0-canary.02ecd4d85.0",
115+
"@material/floating-label": "15.0.0-canary.02ecd4d85.0",
116+
"@material/form-field": "15.0.0-canary.02ecd4d85.0",
117+
"@material/icon-button": "15.0.0-canary.02ecd4d85.0",
118+
"@material/image-list": "15.0.0-canary.02ecd4d85.0",
119+
"@material/layout-grid": "15.0.0-canary.02ecd4d85.0",
120+
"@material/line-ripple": "15.0.0-canary.02ecd4d85.0",
121+
"@material/linear-progress": "15.0.0-canary.02ecd4d85.0",
122+
"@material/list": "15.0.0-canary.02ecd4d85.0",
123+
"@material/menu": "15.0.0-canary.02ecd4d85.0",
124+
"@material/menu-surface": "15.0.0-canary.02ecd4d85.0",
125+
"@material/notched-outline": "15.0.0-canary.02ecd4d85.0",
126+
"@material/radio": "15.0.0-canary.02ecd4d85.0",
127+
"@material/ripple": "15.0.0-canary.02ecd4d85.0",
128+
"@material/rtl": "15.0.0-canary.02ecd4d85.0",
129+
"@material/segmented-button": "15.0.0-canary.02ecd4d85.0",
130+
"@material/select": "15.0.0-canary.02ecd4d85.0",
131+
"@material/shape": "15.0.0-canary.02ecd4d85.0",
132+
"@material/slider": "15.0.0-canary.02ecd4d85.0",
133+
"@material/snackbar": "15.0.0-canary.02ecd4d85.0",
134+
"@material/switch": "15.0.0-canary.02ecd4d85.0",
135+
"@material/tab": "15.0.0-canary.02ecd4d85.0",
136+
"@material/tab-bar": "15.0.0-canary.02ecd4d85.0",
137+
"@material/tab-indicator": "15.0.0-canary.02ecd4d85.0",
138+
"@material/tab-scroller": "15.0.0-canary.02ecd4d85.0",
139+
"@material/textfield": "15.0.0-canary.02ecd4d85.0",
140+
"@material/theme": "15.0.0-canary.02ecd4d85.0",
141+
"@material/tooltip": "15.0.0-canary.02ecd4d85.0",
142+
"@material/top-app-bar": "15.0.0-canary.02ecd4d85.0",
143+
"@material/touch-target": "15.0.0-canary.02ecd4d85.0",
144+
"@material/typography": "15.0.0-canary.02ecd4d85.0",
145145
"@octokit/rest": "18.3.5",
146146
"@rollup/plugin-commonjs": "^21.0.0",
147147
"@rollup/plugin-node-resolve": "^13.1.3",

‎packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^14.0.0 || ^15.0.0"
5-
MDC_PACKAGE_VERSION = "15.0.0-canary.5b40eb988.0"
5+
MDC_PACKAGE_VERSION = "15.0.0-canary.02ecd4d85.0"
66
TSLIB_PACKAGE_VERSION = "^2.3.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
88

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1+
@use 'sass:map';
12
@use '@angular/material' as mat;
2-
@use '@material/circular-progress' as mdc-circular-progress;
3+
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
34

45

5-
@mixin _palette-styles($color) {
6-
@include mdc-circular-progress.color($color, $query: mat.$private-mdc-theme-styles-query);
6+
@mixin _palette-styles($config, $palette) {
7+
$color: mat.get-color-from-palette(map.get($config, $palette));
8+
@include mdc-circular-progress-theme.theme((active-indicator-color: $color));
79
}
810

911
@mixin color($config-or-theme) {
1012
$config: mat.get-color-config($config-or-theme);
1113
@include mat.private-using-mdc-theme($config) {
1214
.mat-mdc-progress-spinner {
13-
@include _palette-styles(primary);
15+
@include _palette-styles($config, primary);
1416

1517
&.mat-accent {
16-
@include _palette-styles(secondary);
18+
@include _palette-styles($config, accent);
1719
}
1820

1921
&.mat-warn {
20-
@include _palette-styles(error);
22+
@include _palette-styles($config, warn);
2123
}
2224
}
2325
}

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,36 @@
1+
@use 'sass:map';
12
@use '@angular/material' as mat;
23
@use '@angular/cdk';
3-
@use '@material/circular-progress' as mdc-circular-progress;
4+
@use '@material/circular-progress/circular-progress' as mdc-circular-progress;
5+
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
46

57

68
@include mat.private-disable-mdc-fallback-declarations {
7-
@include mdc-circular-progress.core-styles($query: mat.$private-mdc-base-styles-query);
9+
@include mdc-circular-progress.static-styles($query: mat.$private-mdc-base-styles-query);
810
}
911

1012
.mat-mdc-progress-spinner {
13+
@include mat.private-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,
18+
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,
24+
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+
));
32+
}
33+
1134
// Explicitly set to `block` since the browser defaults custom elements to `inline`.
1235
display: block;
1336

0 commit comments

Comments
 (0)