Skip to content

Commit

Permalink
refactor(material-experimental/mdc-progress-spinner): switch to new t…
Browse files Browse the repository at this point in the history 
…heming API (#25248)

Reworks the MDC progress spinner to use the new theming API based on CSS variables.
  • Loading branch information
@crisbeto
crisbeto committed Jul 12, 2022
1 parent 22cb07b commit 0388de3
Show file tree
Hide file tree
Showing 5 changed files with 653 additions and 626 deletions.
94 changes: 47 additions & 47 deletions package.json
View file
Expand Up @@ -95,53 +95,53 @@
"@bazel/terser": "5.5.2",
"@bazel/worker": "5.5.2",
"@firebase/app-types": "^0.7.0",
"@material/animation": "15.0.0-canary.5b40eb988.0",
"@material/auto-init": "15.0.0-canary.5b40eb988.0",
"@material/banner": "15.0.0-canary.5b40eb988.0",
"@material/base": "15.0.0-canary.5b40eb988.0",
"@material/button": "15.0.0-canary.5b40eb988.0",
"@material/card": "15.0.0-canary.5b40eb988.0",
"@material/checkbox": "15.0.0-canary.5b40eb988.0",
"@material/chips": "15.0.0-canary.5b40eb988.0",
"@material/circular-progress": "15.0.0-canary.5b40eb988.0",
"@material/data-table": "15.0.0-canary.5b40eb988.0",
"@material/density": "15.0.0-canary.5b40eb988.0",
"@material/dialog": "15.0.0-canary.5b40eb988.0",
"@material/dom": "15.0.0-canary.5b40eb988.0",
"@material/drawer": "15.0.0-canary.5b40eb988.0",
"@material/elevation": "15.0.0-canary.5b40eb988.0",
"@material/fab": "15.0.0-canary.5b40eb988.0",
"@material/feature-targeting": "15.0.0-canary.5b40eb988.0",
"@material/floating-label": "15.0.0-canary.5b40eb988.0",
"@material/form-field": "15.0.0-canary.5b40eb988.0",
"@material/icon-button": "15.0.0-canary.5b40eb988.0",
"@material/image-list": "15.0.0-canary.5b40eb988.0",
"@material/layout-grid": "15.0.0-canary.5b40eb988.0",
"@material/line-ripple": "15.0.0-canary.5b40eb988.0",
"@material/linear-progress": "15.0.0-canary.5b40eb988.0",
"@material/list": "15.0.0-canary.5b40eb988.0",
"@material/menu": "15.0.0-canary.5b40eb988.0",
"@material/menu-surface": "15.0.0-canary.5b40eb988.0",
"@material/notched-outline": "15.0.0-canary.5b40eb988.0",
"@material/radio": "15.0.0-canary.5b40eb988.0",
"@material/ripple": "15.0.0-canary.5b40eb988.0",
"@material/rtl": "15.0.0-canary.5b40eb988.0",
"@material/segmented-button": "15.0.0-canary.5b40eb988.0",
"@material/select": "15.0.0-canary.5b40eb988.0",
"@material/shape": "15.0.0-canary.5b40eb988.0",
"@material/slider": "15.0.0-canary.5b40eb988.0",
"@material/snackbar": "15.0.0-canary.5b40eb988.0",
"@material/switch": "15.0.0-canary.5b40eb988.0",
"@material/tab": "15.0.0-canary.5b40eb988.0",
"@material/tab-bar": "15.0.0-canary.5b40eb988.0",
"@material/tab-indicator": "15.0.0-canary.5b40eb988.0",
"@material/tab-scroller": "15.0.0-canary.5b40eb988.0",
"@material/textfield": "15.0.0-canary.5b40eb988.0",
"@material/theme": "15.0.0-canary.5b40eb988.0",
"@material/tooltip": "15.0.0-canary.5b40eb988.0",
"@material/top-app-bar": "15.0.0-canary.5b40eb988.0",
"@material/touch-target": "15.0.0-canary.5b40eb988.0",
"@material/typography": "15.0.0-canary.5b40eb988.0",
"@material/animation": "15.0.0-canary.02ecd4d85.0",
"@material/auto-init": "15.0.0-canary.02ecd4d85.0",
"@material/banner": "15.0.0-canary.02ecd4d85.0",
"@material/base": "15.0.0-canary.02ecd4d85.0",
"@material/button": "15.0.0-canary.02ecd4d85.0",
"@material/card": "15.0.0-canary.02ecd4d85.0",
"@material/checkbox": "15.0.0-canary.02ecd4d85.0",
"@material/chips": "15.0.0-canary.02ecd4d85.0",
"@material/circular-progress": "15.0.0-canary.02ecd4d85.0",
"@material/data-table": "15.0.0-canary.02ecd4d85.0",
"@material/density": "15.0.0-canary.02ecd4d85.0",
"@material/dialog": "15.0.0-canary.02ecd4d85.0",
"@material/dom": "15.0.0-canary.02ecd4d85.0",
"@material/drawer": "15.0.0-canary.02ecd4d85.0",
"@material/elevation": "15.0.0-canary.02ecd4d85.0",
"@material/fab": "15.0.0-canary.02ecd4d85.0",
"@material/feature-targeting": "15.0.0-canary.02ecd4d85.0",
"@material/floating-label": "15.0.0-canary.02ecd4d85.0",
"@material/form-field": "15.0.0-canary.02ecd4d85.0",
"@material/icon-button": "15.0.0-canary.02ecd4d85.0",
"@material/image-list": "15.0.0-canary.02ecd4d85.0",
"@material/layout-grid": "15.0.0-canary.02ecd4d85.0",
"@material/line-ripple": "15.0.0-canary.02ecd4d85.0",
"@material/linear-progress": "15.0.0-canary.02ecd4d85.0",
"@material/list": "15.0.0-canary.02ecd4d85.0",
"@material/menu": "15.0.0-canary.02ecd4d85.0",
"@material/menu-surface": "15.0.0-canary.02ecd4d85.0",
"@material/notched-outline": "15.0.0-canary.02ecd4d85.0",
"@material/radio": "15.0.0-canary.02ecd4d85.0",
"@material/ripple": "15.0.0-canary.02ecd4d85.0",
"@material/rtl": "15.0.0-canary.02ecd4d85.0",
"@material/segmented-button": "15.0.0-canary.02ecd4d85.0",
"@material/select": "15.0.0-canary.02ecd4d85.0",
"@material/shape": "15.0.0-canary.02ecd4d85.0",
"@material/slider": "15.0.0-canary.02ecd4d85.0",
"@material/snackbar": "15.0.0-canary.02ecd4d85.0",
"@material/switch": "15.0.0-canary.02ecd4d85.0",
"@material/tab": "15.0.0-canary.02ecd4d85.0",
"@material/tab-bar": "15.0.0-canary.02ecd4d85.0",
"@material/tab-indicator": "15.0.0-canary.02ecd4d85.0",
"@material/tab-scroller": "15.0.0-canary.02ecd4d85.0",
"@material/textfield": "15.0.0-canary.02ecd4d85.0",
"@material/theme": "15.0.0-canary.02ecd4d85.0",
"@material/tooltip": "15.0.0-canary.02ecd4d85.0",
"@material/top-app-bar": "15.0.0-canary.02ecd4d85.0",
"@material/touch-target": "15.0.0-canary.02ecd4d85.0",
"@material/typography": "15.0.0-canary.02ecd4d85.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
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 = "^14.0.0 || ^15.0.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.5b40eb988.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.02ecd4d85.0"
TSLIB_PACKAGE_VERSION = "^2.3.0"
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"

Expand Down
14 changes: 8 additions & 6 deletions src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
View file
@@ -1,23 +1,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
@use '@material/circular-progress' as mdc-circular-progress;
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;


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

@mixin color($config-or-theme) {
$config: mat.get-color-config($config-or-theme);
@include mat.private-using-mdc-theme($config) {
.mat-mdc-progress-spinner {
@include _palette-styles(primary);
@include _palette-styles($config, primary);

&.mat-accent {
@include _palette-styles(secondary);
@include _palette-styles($config, accent);
}

&.mat-warn {
@include _palette-styles(error);
@include _palette-styles($config, warn);
}
}
}
Expand Down
27 changes: 25 additions & 2 deletions src/material-experimental/mdc-progress-spinner/progress-spinner.scss
View file
@@ -1,13 +1,36 @@
@use 'sass:map';
@use '@angular/material' as mat;
@use '@angular/cdk';
@use '@material/circular-progress' as mdc-circular-progress;
@use '@material/circular-progress/circular-progress' as mdc-circular-progress;
@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;


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

.mat-mdc-progress-spinner {
@include mat.private-disable-mdc-fallback-declarations {
@include mdc-circular-progress-theme.theme-styles(map.merge(
mdc-circular-progress-theme.$light-theme,
(
active-indicator-color: transparent,

// We don't support the multi color variant so we exclude these variables.
four-color-active-indicator-four-color: null,
four-color-active-indicator-one-color: null,
four-color-active-indicator-three-color: null,
four-color-active-indicator-two-color: null,

// We currently size the element ourselves so we can exclude these styles as well.
// TODO(crisbeto): look into reusing MDC's styles by binding to a CSS variable
// in our own template.
active-indicator-width: null,
size: null,
)
));
}

// Explicitly set to `block` since the browser defaults custom elements to `inline`.
display: block;

Expand Down

0 comments on commit 0388de3

Please sign in to comment.