refactor(material/progress-bar): simplify structural styles (#29303)

Reworks the progress bar styles to be simpler and easier to maintain.
angular · Jun 24, 2024 · e92e9cc · e92e9cc
1 parent d9181b5
commit e92e9cc
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 30 deletions.
diff --git a/src/material/core/style/_vendor-prefixes.scss b/src/material/core/style/_vendor-prefixes.scss
@@ -48,4 +48,9 @@
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
 }
+
+@mixin mask-image($value) {
+ -webkit-mask-image: $value;
+ mask-image: $value;
+}
 // stylelint-enable
diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss
@@ -4,7 +4,6 @@
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
-@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-progress-bar.
@@ -16,14 +15,19 @@
  @else {
  // Add default values for tokens not related to color, typography, or density.
  @include sass-utils.current-selector-or-root() {
- @include mdc-linear-progress-theme.theme(tokens-mdc-linear-progress.get-unthemable-tokens());
+ @include token-utils.create-token-values(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-unthemable-tokens()
+ );
  }
  }
 }
 
 @mixin _palette-styles($theme, $palette-name) {
- @include mdc-linear-progress-theme.theme(
- tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name));
+ @include token-utils.create-token-values(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name)
+ );
 }
 
 /// Outputs color theme styles for the mat-progress-bar.
@@ -98,7 +102,6 @@
 @mixin _theme-from-tokens($tokens, $options...) {
  @include validation.selector-defined(
  'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
- $mdc-linear-progress-tokens:
- token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...);
- @include mdc-linear-progress-theme.theme($mdc-linear-progress-tokens);
+ $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...);
+ @include token-utils.create-token-values(tokens-mdc-linear-progress.$prefix, $tokens);
 }
diff --git a/src/material/progress-bar/progress-bar.scss b/src/material/progress-bar/progress-bar.scss
@@ -1,15 +1,7 @@
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
-@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
-@use '../core/tokens/m2/mdc/linear-progress' as m2-mdc-linear-progress;
-
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
- // Add the MDC progress-bar static styles.
- @include mdc-linear-progress.static-styles();
-
- // Add the official slots for the MDC progress-bar.
- @include mdc-linear-progress-theme.theme-styles(m2-mdc-linear-progress.get-token-slots());
-}
+@use '@angular/cdk';
+@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
+@use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 .mat-mdc-progress-bar {
  // Explicitly set to `block` since the browser defaults custom elements to `inline`.
@@ -39,16 +31,306 @@
  transition: transform 1ms;
  }
  }
+}
+
+.mdc-linear-progress {
+ position: relative;
+ width: 100%;
+ transform: translateZ(0);
+ outline: 1px solid transparent;
+ overflow-x: hidden;
+ transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ $track-variable: token-utils.get-token-variable(track-height);
+ $indicator-height-variable: token-utils.get-token-variable(active-indicator-height);
+ height: max(var(#{$track-variable}), var(#{$indicator-height-variable}));
+ }
+
+ @include cdk.high-contrast(active, off) {
+ outline-color: CanvasText;
+ }
+}
+
+.mdc-linear-progress__bar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ width: 100%;
+ animation: none;
+ transform-origin: top left;
+ transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ @include token-utils.create-token-slot(height, active-indicator-height);
+ }
+
+ .mdc-linear-progress--indeterminate & {
+ transition: none;
+ }
+
+ [dir='rtl'] & {
+ right: 0;
+ transform-origin: center right;
+ }
+}
+
+.mdc-linear-progress__bar-inner {
+ display: inline-block;
+ position: absolute;
+ width: 100%;
+ animation: none;
+ border-top-style: solid;
+
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ @include token-utils.create-token-slot(border-color, active-indicator-color);
+ @include token-utils.create-token-slot(border-top-width, active-indicator-height);
+ }
+}
+
+.mdc-linear-progress__buffer {
+ display: flex;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ width: 100%;
+ overflow: hidden;
+
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ @include token-utils.create-token-slot(height, track-height);
+ @include token-utils.create-token-slot(border-radius, track-shape);
+ }
+}
+
+.mdc-linear-progress__buffer-dots {
+ $mask: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' " +
+ "xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' " +
+ "enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' " +
+ "preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";
+
+ @include vendor-prefixes.mask-image(url($mask));
+ background-repeat: repeat-x;
+ flex: auto;
+ transform: rotate(180deg);
+ animation: mdc-linear-progress-buffering 250ms infinite linear;
+
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ @include token-utils.create-token-slot(background-color, track-color);
+ }
+
+ @include cdk.high-contrast(active, off) {
+ background-color: ButtonBorder;
+ }
+
+ [dir='rtl'] & {
+ animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
+ transform: rotate(0);
+ }
+}
+
+.mdc-linear-progress__buffer-bar {
+ flex: 0 1 100%;
+ transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ @include token-utils.create-token-slot(background-color, track-color);
+ }
+}
+
+.mdc-linear-progress__primary-bar {
+ transform: scaleX(0);
+
+ .mdc-linear-progress--indeterminate & {
+ left: -145.166611%;
+ }
+
+ .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
+ animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite linear;
+ }
+
+ .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
+ > .mdc-linear-progress__bar-inner {
+ animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite linear;
+ }
+ }
+
+ [dir='rtl'] .mdc-linear-progress.mdc-linear-progress--animation-ready & {
+ animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
+ }
+
+ [dir='rtl'] .mdc-linear-progress.mdc-linear-progress--indeterminate & {
+ right: -145.166611%;
+ left: auto;
+ }
+}
+
+.mdc-linear-progress__secondary-bar {
+ display: none;
+
+ .mdc-linear-progress--indeterminate & {
+ left: -54.888891%;
+ display: block;
+ }
+
+ .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
+ animation: mdc-linear-progress-secondary-indeterminate-translate 2s infinite linear;
+ }
+
+ .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
+ > .mdc-linear-progress__bar-inner {
+ animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
+ }
+ }
 
- // These values were derived from the default values of MDC's linear-progress.
- --mdc-linear-progress-primary-half: 83.67142%;
- --mdc-linear-progress-primary-full: 200.611057%;
- --mdc-linear-progress-secondary-quarter: 37.651913%;
- --mdc-linear-progress-secondary-half: 84.386165%;
- --mdc-linear-progress-secondary-full: 160.277782%;
- --mdc-linear-progress-primary-half-neg: -83.67142%;
- --mdc-linear-progress-primary-full-neg: -200.611057%;
- --mdc-linear-progress-secondary-quarter-neg: -37.651913%;
- --mdc-linear-progress-secondary-half-neg: -84.386165%;
- --mdc-linear-progress-secondary-full-neg: -160.277782%;
+ [dir='rtl'] .mdc-linear-progress.mdc-linear-progress--animation-ready & {
+ animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
+ }
+
+ [dir='rtl'] .mdc-linear-progress.mdc-linear-progress--indeterminate & {
+ right: -54.888891%;
+ left: auto;
+ }
+}
+
+@keyframes mdc-linear-progress-buffering {
+ from {
+ @include token-utils.use-tokens(
+ tokens-mdc-linear-progress.$prefix,
+ tokens-mdc-linear-progress.get-token-slots()
+ ) {
+ $track-variable: token-utils.get-token-variable(track-height);
+ transform: rotate(180deg) translateX(calc(var(#{$track-variable}) * -2.5));
+ }
+ }
+}
+
+@keyframes mdc-linear-progress-primary-indeterminate-translate {
+ 0% {
+ transform: translateX(0);
+ }
+ 20% {
+ animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+ transform: translateX(0);
+ }
+ 59.15% {
+ animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+ transform: translateX(83.67142%);
+ }
+ 100% {
+ transform: translateX(200.611057%);
+ }
+}
+
+@keyframes mdc-linear-progress-primary-indeterminate-scale {
+ 0% {
+ transform: scaleX(0.08);
+ }
+ 36.65% {
+ animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+ transform: scaleX(0.08);
+ }
+ 69.15% {
+ animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+ transform: scaleX(0.661479);
+ }
+ 100% {
+ transform: scaleX(0.08);
+ }
+}
+
+@keyframes mdc-linear-progress-secondary-indeterminate-translate {
+ 0% {
+ animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+ transform: translateX(0);
+ }
+ 25% {
+ animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+ transform: translateX(37.651913%);
+ }
+ 48.35% {
+ animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+ transform: translateX(84.386165%);
+ }
+ 100% {
+ transform: translateX(160.277782%);
+ }
+}
+
+@keyframes mdc-linear-progress-secondary-indeterminate-scale {
+ 0% {
+ animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+ transform: scaleX(0.08);
+ }
+ 19.15% {
+ animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+ transform: scaleX(0.457104);
+ }
+ 44.15% {
+ animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+ transform: scaleX(0.72796);
+ }
+ 100% {
+ transform: scaleX(0.08);
+ }
+}
+
+@keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
+ 0% {
+ transform: translateX(0);
+ }
+ 20% {
+ animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+ transform: translateX(0);
+ }
+ 59.15% {
+ animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+ transform: translateX(-83.67142%);
+ }
+ 100% {
+ transform: translateX(-200.611057%);
+ }
+}
+
+@keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
+ 0% {
+ animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+ transform: translateX(0);
+ }
+ 25% {
+ animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+ transform: translateX(-37.651913%);
+ }
+ 48.35% {
+ animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+ transform: translateX(-84.386165%);
+ }
+ 100% {
+ transform: translateX(-160.277782%);
+ }
+}
+
+@keyframes mdc-linear-progress-buffering-reverse {
+ from {
+ transform: translateX(-10px);
+ }
 }