Skip to content

Commit

Permalink
refactor(material/progress-bar): switch to new theming API (angular#2…
Browse files Browse the repository at this point in the history 
…5576)

Switches the progress bar component to the new theming API from MDC.
  • Loading branch information
@crisbeto
crisbeto authored and Martin Forstner committed Sep 16, 2022
1 parent a39348a commit 1582674
Show file tree
Hide file tree
Showing 5 changed files with 645 additions and 634 deletions.
94 changes: 47 additions & 47 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,53 +95,53 @@
"@bazel/terser": "5.5.3",
"@bazel/worker": "5.5.3",
"@firebase/app-types": "^0.7.0",
"@material/animation": "15.0.0-canary.10196647d.0",
"@material/auto-init": "15.0.0-canary.10196647d.0",
"@material/banner": "15.0.0-canary.10196647d.0",
"@material/base": "15.0.0-canary.10196647d.0",
"@material/button": "15.0.0-canary.10196647d.0",
"@material/card": "15.0.0-canary.10196647d.0",
"@material/checkbox": "15.0.0-canary.10196647d.0",
"@material/chips": "15.0.0-canary.10196647d.0",
"@material/circular-progress": "15.0.0-canary.10196647d.0",
"@material/data-table": "15.0.0-canary.10196647d.0",
"@material/density": "15.0.0-canary.10196647d.0",
"@material/dialog": "15.0.0-canary.10196647d.0",
"@material/dom": "15.0.0-canary.10196647d.0",
"@material/drawer": "15.0.0-canary.10196647d.0",
"@material/elevation": "15.0.0-canary.10196647d.0",
"@material/fab": "15.0.0-canary.10196647d.0",
"@material/feature-targeting": "15.0.0-canary.10196647d.0",
"@material/floating-label": "15.0.0-canary.10196647d.0",
"@material/form-field": "15.0.0-canary.10196647d.0",
"@material/icon-button": "15.0.0-canary.10196647d.0",
"@material/image-list": "15.0.0-canary.10196647d.0",
"@material/layout-grid": "15.0.0-canary.10196647d.0",
"@material/line-ripple": "15.0.0-canary.10196647d.0",
"@material/linear-progress": "15.0.0-canary.10196647d.0",
"@material/list": "15.0.0-canary.10196647d.0",
"@material/menu": "15.0.0-canary.10196647d.0",
"@material/menu-surface": "15.0.0-canary.10196647d.0",
"@material/notched-outline": "15.0.0-canary.10196647d.0",
"@material/radio": "15.0.0-canary.10196647d.0",
"@material/ripple": "15.0.0-canary.10196647d.0",
"@material/rtl": "15.0.0-canary.10196647d.0",
"@material/segmented-button": "15.0.0-canary.10196647d.0",
"@material/select": "15.0.0-canary.10196647d.0",
"@material/shape": "15.0.0-canary.10196647d.0",
"@material/slider": "15.0.0-canary.10196647d.0",
"@material/snackbar": "15.0.0-canary.10196647d.0",
"@material/switch": "15.0.0-canary.10196647d.0",
"@material/tab": "15.0.0-canary.10196647d.0",
"@material/tab-bar": "15.0.0-canary.10196647d.0",
"@material/tab-indicator": "15.0.0-canary.10196647d.0",
"@material/tab-scroller": "15.0.0-canary.10196647d.0",
"@material/textfield": "15.0.0-canary.10196647d.0",
"@material/theme": "15.0.0-canary.10196647d.0",
"@material/tooltip": "15.0.0-canary.10196647d.0",
"@material/top-app-bar": "15.0.0-canary.10196647d.0",
"@material/touch-target": "15.0.0-canary.10196647d.0",
"@material/typography": "15.0.0-canary.10196647d.0",
"@material/animation": "15.0.0-canary.c363f267b.0",
"@material/auto-init": "15.0.0-canary.c363f267b.0",
"@material/banner": "15.0.0-canary.c363f267b.0",
"@material/base": "15.0.0-canary.c363f267b.0",
"@material/button": "15.0.0-canary.c363f267b.0",
"@material/card": "15.0.0-canary.c363f267b.0",
"@material/checkbox": "15.0.0-canary.c363f267b.0",
"@material/chips": "15.0.0-canary.c363f267b.0",
"@material/circular-progress": "15.0.0-canary.c363f267b.0",
"@material/data-table": "15.0.0-canary.c363f267b.0",
"@material/density": "15.0.0-canary.c363f267b.0",
"@material/dialog": "15.0.0-canary.c363f267b.0",
"@material/dom": "15.0.0-canary.c363f267b.0",
"@material/drawer": "15.0.0-canary.c363f267b.0",
"@material/elevation": "15.0.0-canary.c363f267b.0",
"@material/fab": "15.0.0-canary.c363f267b.0",
"@material/feature-targeting": "15.0.0-canary.c363f267b.0",
"@material/floating-label": "15.0.0-canary.c363f267b.0",
"@material/form-field": "15.0.0-canary.c363f267b.0",
"@material/icon-button": "15.0.0-canary.c363f267b.0",
"@material/image-list": "15.0.0-canary.c363f267b.0",
"@material/layout-grid": "15.0.0-canary.c363f267b.0",
"@material/line-ripple": "15.0.0-canary.c363f267b.0",
"@material/linear-progress": "15.0.0-canary.c363f267b.0",
"@material/list": "15.0.0-canary.c363f267b.0",
"@material/menu": "15.0.0-canary.c363f267b.0",
"@material/menu-surface": "15.0.0-canary.c363f267b.0",
"@material/notched-outline": "15.0.0-canary.c363f267b.0",
"@material/radio": "15.0.0-canary.c363f267b.0",
"@material/ripple": "15.0.0-canary.c363f267b.0",
"@material/rtl": "15.0.0-canary.c363f267b.0",
"@material/segmented-button": "15.0.0-canary.c363f267b.0",
"@material/select": "15.0.0-canary.c363f267b.0",
"@material/shape": "15.0.0-canary.c363f267b.0",
"@material/slider": "15.0.0-canary.c363f267b.0",
"@material/snackbar": "15.0.0-canary.c363f267b.0",
"@material/switch": "15.0.0-canary.c363f267b.0",
"@material/tab": "15.0.0-canary.c363f267b.0",
"@material/tab-bar": "15.0.0-canary.c363f267b.0",
"@material/tab-indicator": "15.0.0-canary.c363f267b.0",
"@material/tab-scroller": "15.0.0-canary.c363f267b.0",
"@material/textfield": "15.0.0-canary.c363f267b.0",
"@material/theme": "15.0.0-canary.c363f267b.0",
"@material/tooltip": "15.0.0-canary.c363f267b.0",
"@material/top-app-bar": "15.0.0-canary.c363f267b.0",
"@material/touch-target": "15.0.0-canary.c363f267b.0",
"@material/typography": "15.0.0-canary.c363f267b.0",
"@octokit/rest": "18.3.5",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.1.3",
Expand Down
2 changes: 1 addition & 1 deletion packages.bzl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
# version for the placeholders.
ANGULAR_PACKAGE_VERSION = "^15.0.0-0 || ^16.0.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.10196647d.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.c363f267b.0"
TSLIB_PACKAGE_VERSION = "^2.3.0"
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"

Expand Down
23 changes: 14 additions & 9 deletions src/material/progress-bar/_progress-bar-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/theming/theming';
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/linear-progress' as mdc-linear-progress;
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
@use 'sass:color';


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

@include mdc-linear-progress-theme.theme((
active-indicator-color: mdc-theme-color.prop-value($color),
));
}

@mixin color($config-or-theme) {
Expand Down
9 changes: 7 additions & 2 deletions src/material/progress-bar/progress-bar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
@use '../core/mdc-helpers/mdc-helpers';
@use '@material/linear-progress' as mdc-linear-progress;
@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;

@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-linear-progress.core-styles($query: mdc-helpers.$mdc-base-styles-query);
@include mdc-linear-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);

// TODO(crisbeto): we should be able to save some bytes here by setting the `track-color`
// to null, but MDC's styles assume that a string is always going to be passed in.
@include mdc-linear-progress-theme.theme-styles($theme: mdc-linear-progress-theme.$light-theme);
}

.mat-mdc-progress-bar {
Expand Down

0 comments on commit 1582674

Please sign in to comment.