Skip to content

Commit e0cccc7

Browse files
crisbetocrisbeto
authored
refactor(material/progress-bar): switch to new theming API (#25576)
Switches the progress bar component to the new theming API from MDC.
1 parent 814ba1b commit e0cccc7

File tree

5 files changed

+645
-634
lines changed

5 files changed

+645
-634
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.3",
9696
"@bazel/worker": "5.5.3",
9797
"@firebase/app-types": "^0.7.0",
98-
"@material/animation": "15.0.0-canary.10196647d.0",
99-
"@material/auto-init": "15.0.0-canary.10196647d.0",
100-
"@material/banner": "15.0.0-canary.10196647d.0",
101-
"@material/base": "15.0.0-canary.10196647d.0",
102-
"@material/button": "15.0.0-canary.10196647d.0",
103-
"@material/card": "15.0.0-canary.10196647d.0",
104-
"@material/checkbox": "15.0.0-canary.10196647d.0",
105-
"@material/chips": "15.0.0-canary.10196647d.0",
106-
"@material/circular-progress": "15.0.0-canary.10196647d.0",
107-
"@material/data-table": "15.0.0-canary.10196647d.0",
108-
"@material/density": "15.0.0-canary.10196647d.0",
109-
"@material/dialog": "15.0.0-canary.10196647d.0",
110-
"@material/dom": "15.0.0-canary.10196647d.0",
111-
"@material/drawer": "15.0.0-canary.10196647d.0",
112-
"@material/elevation": "15.0.0-canary.10196647d.0",
113-
"@material/fab": "15.0.0-canary.10196647d.0",
114-
"@material/feature-targeting": "15.0.0-canary.10196647d.0",
115-
"@material/floating-label": "15.0.0-canary.10196647d.0",
116-
"@material/form-field": "15.0.0-canary.10196647d.0",
117-
"@material/icon-button": "15.0.0-canary.10196647d.0",
118-
"@material/image-list": "15.0.0-canary.10196647d.0",
119-
"@material/layout-grid": "15.0.0-canary.10196647d.0",
120-
"@material/line-ripple": "15.0.0-canary.10196647d.0",
121-
"@material/linear-progress": "15.0.0-canary.10196647d.0",
122-
"@material/list": "15.0.0-canary.10196647d.0",
123-
"@material/menu": "15.0.0-canary.10196647d.0",
124-
"@material/menu-surface": "15.0.0-canary.10196647d.0",
125-
"@material/notched-outline": "15.0.0-canary.10196647d.0",
126-
"@material/radio": "15.0.0-canary.10196647d.0",
127-
"@material/ripple": "15.0.0-canary.10196647d.0",
128-
"@material/rtl": "15.0.0-canary.10196647d.0",
129-
"@material/segmented-button": "15.0.0-canary.10196647d.0",
130-
"@material/select": "15.0.0-canary.10196647d.0",
131-
"@material/shape": "15.0.0-canary.10196647d.0",
132-
"@material/slider": "15.0.0-canary.10196647d.0",
133-
"@material/snackbar": "15.0.0-canary.10196647d.0",
134-
"@material/switch": "15.0.0-canary.10196647d.0",
135-
"@material/tab": "15.0.0-canary.10196647d.0",
136-
"@material/tab-bar": "15.0.0-canary.10196647d.0",
137-
"@material/tab-indicator": "15.0.0-canary.10196647d.0",
138-
"@material/tab-scroller": "15.0.0-canary.10196647d.0",
139-
"@material/textfield": "15.0.0-canary.10196647d.0",
140-
"@material/theme": "15.0.0-canary.10196647d.0",
141-
"@material/tooltip": "15.0.0-canary.10196647d.0",
142-
"@material/top-app-bar": "15.0.0-canary.10196647d.0",
143-
"@material/touch-target": "15.0.0-canary.10196647d.0",
144-
"@material/typography": "15.0.0-canary.10196647d.0",
98+
"@material/animation": "15.0.0-canary.c363f267b.0",
99+
"@material/auto-init": "15.0.0-canary.c363f267b.0",
100+
"@material/banner": "15.0.0-canary.c363f267b.0",
101+
"@material/base": "15.0.0-canary.c363f267b.0",
102+
"@material/button": "15.0.0-canary.c363f267b.0",
103+
"@material/card": "15.0.0-canary.c363f267b.0",
104+
"@material/checkbox": "15.0.0-canary.c363f267b.0",
105+
"@material/chips": "15.0.0-canary.c363f267b.0",
106+
"@material/circular-progress": "15.0.0-canary.c363f267b.0",
107+
"@material/data-table": "15.0.0-canary.c363f267b.0",
108+
"@material/density": "15.0.0-canary.c363f267b.0",
109+
"@material/dialog": "15.0.0-canary.c363f267b.0",
110+
"@material/dom": "15.0.0-canary.c363f267b.0",
111+
"@material/drawer": "15.0.0-canary.c363f267b.0",
112+
"@material/elevation": "15.0.0-canary.c363f267b.0",
113+
"@material/fab": "15.0.0-canary.c363f267b.0",
114+
"@material/feature-targeting": "15.0.0-canary.c363f267b.0",
115+
"@material/floating-label": "15.0.0-canary.c363f267b.0",
116+
"@material/form-field": "15.0.0-canary.c363f267b.0",
117+
"@material/icon-button": "15.0.0-canary.c363f267b.0",
118+
"@material/image-list": "15.0.0-canary.c363f267b.0",
119+
"@material/layout-grid": "15.0.0-canary.c363f267b.0",
120+
"@material/line-ripple": "15.0.0-canary.c363f267b.0",
121+
"@material/linear-progress": "15.0.0-canary.c363f267b.0",
122+
"@material/list": "15.0.0-canary.c363f267b.0",
123+
"@material/menu": "15.0.0-canary.c363f267b.0",
124+
"@material/menu-surface": "15.0.0-canary.c363f267b.0",
125+
"@material/notched-outline": "15.0.0-canary.c363f267b.0",
126+
"@material/radio": "15.0.0-canary.c363f267b.0",
127+
"@material/ripple": "15.0.0-canary.c363f267b.0",
128+
"@material/rtl": "15.0.0-canary.c363f267b.0",
129+
"@material/segmented-button": "15.0.0-canary.c363f267b.0",
130+
"@material/select": "15.0.0-canary.c363f267b.0",
131+
"@material/shape": "15.0.0-canary.c363f267b.0",
132+
"@material/slider": "15.0.0-canary.c363f267b.0",
133+
"@material/snackbar": "15.0.0-canary.c363f267b.0",
134+
"@material/switch": "15.0.0-canary.c363f267b.0",
135+
"@material/tab": "15.0.0-canary.c363f267b.0",
136+
"@material/tab-bar": "15.0.0-canary.c363f267b.0",
137+
"@material/tab-indicator": "15.0.0-canary.c363f267b.0",
138+
"@material/tab-scroller": "15.0.0-canary.c363f267b.0",
139+
"@material/textfield": "15.0.0-canary.c363f267b.0",
140+
"@material/theme": "15.0.0-canary.c363f267b.0",
141+
"@material/tooltip": "15.0.0-canary.c363f267b.0",
142+
"@material/top-app-bar": "15.0.0-canary.c363f267b.0",
143+
"@material/touch-target": "15.0.0-canary.c363f267b.0",
144+
"@material/typography": "15.0.0-canary.c363f267b.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 = "^15.0.0-0 || ^16.0.0"
5-
MDC_PACKAGE_VERSION = "15.0.0-canary.10196647d.0"
5+
MDC_PACKAGE_VERSION = "15.0.0-canary.c363f267b.0"
66
TSLIB_PACKAGE_VERSION = "^2.3.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
88

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
@use '../core/mdc-helpers/mdc-helpers';
22
@use '../core/theming/theming';
33
@use '@material/theme/theme-color' as mdc-theme-color;
4-
@use '@material/linear-progress' as mdc-linear-progress;
4+
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
55
@use 'sass:color';
66

77

88
@mixin _palette-styles($color) {
9-
// TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
10-
// writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
11-
// and doesn't match the Material design spec. For now we approximate the buffer background by
12-
// applying an opacity to the color of the bar.
13-
$buffer-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75);
14-
@include mdc-linear-progress.bar-color($color, $query: mdc-helpers.$mdc-theme-styles-query);
15-
@include mdc-linear-progress.buffer-color($buffer-color,
16-
$query: mdc-helpers.$mdc-theme-styles-query);
9+
// We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
10+
// variable since MDC's buffer animation works by constructing an SVG string from this color.
11+
@include mdc-linear-progress-theme.theme-styles((
12+
// TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
13+
// writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
14+
// and doesn't match the Material design spec. For now we approximate the buffer background by
15+
// applying an opacity to the color of the bar.
16+
track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
17+
));
18+
19+
@include mdc-linear-progress-theme.theme((
20+
active-indicator-color: mdc-theme-color.prop-value($color),
21+
));
1722
}
1823

1924
@mixin color($config-or-theme) {

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
@use '../core/mdc-helpers/mdc-helpers';
2-
@use '@material/linear-progress' as mdc-linear-progress;
2+
@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
3+
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
34

45
@include mdc-helpers.disable-mdc-fallback-declarations {
5-
@include mdc-linear-progress.core-styles($query: mdc-helpers.$mdc-base-styles-query);
6+
@include mdc-linear-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);
7+
8+
// TODO(crisbeto): we should be able to save some bytes here by setting the `track-color`
9+
// to null, but MDC's styles assume that a string is always going to be passed in.
10+
@include mdc-linear-progress-theme.theme-styles($theme: mdc-linear-progress-theme.$light-theme);
611
}
712

813
.mat-mdc-progress-bar {

0 commit comments

Comments
 (0)