refactor(material/progress-spinner): change mat-progress-spinner to use MDC's token API

Author: wagnermaciel

src/material/core/tokens/m2/mdc/_circular-progress.scss

@@ -0,0 +1,65 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, circular-progress);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // The thickness of the progress spinner's active indicator.
+    active-indicator-width: 4px,
+    // The the diameter of the spinner
+    size: 48px,
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    // Angular Material does not support four color spinners
+    four-color-active-indicator-one-color: null,
+    // Angular Material does not support four color spinners
+    four-color-active-indicator-two-color: null,
+    // Angular Material does not support four color spinners
+    four-color-active-indicator-three-color: null,
+    // Angular Material does not support four color spinners
+    four-color-active-indicator-four-color: null
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  @return (
+    // The color of the progress spinner's active indicator.
+    active-indicator-color: theming.get-color-from-palette(map.get($config, primary))
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return map.merge(
+    get-unthemable-tokens(),
+    map.merge(
+      get-color-tokens(token-utils.$placeholder-color-config),
+      map.merge(
+        get-typography-tokens(token-utils.$placeholder-typography-config),
+        get-density-tokens(token-utils.$placeholder-density-config)
+      )
+    )
+  );
+}

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -2,17 +2,16 @@
 @use 'sass:map';
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
+@use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/theme/validate' as mdc-validate;
+@use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
 @use '../m2/mdc/list' as tokens-mdc-list;
 @use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
+@use '@material/theme/validate' as mdc-validate;
 
-@mixin validate-slots(
-  $component,
-  $slots,
-  $reference
-) {
+@mixin validate-slots($component, $slots, $reference) {
   @debug 'Validating #{$component}...';
   // We don't care what the values are, just that every valid token is present in the slots map.
   // Specifically its ok if the token is explicitly mapped to `null`. We therefore replace all the
@@ -25,17 +24,23 @@
 }
 
 @include validate-slots(
-    $component: 'm2.mdc.list',
-    $slots: tokens-mdc-list.get-token-slots(),
-    $reference: mdc-list-theme.$light-theme
+  $component: 'm2.mdc.list',
+  $slots: tokens-mdc-list.get-token-slots(),
+  $reference: mdc-list-theme.$light-theme
+);
+
+@include validate-slots(
+  $component: 'm2.mdc.circular-progress',
+  $slots: tokens-mdc-circular-progress.get-token-slots(),
+  $reference: mdc-circular-progress-theme.$light-theme
 );
 @include validate-slots(
-    $component: 'm2.mdc.elevated-card',
-    $slots: tokens-mdc-elevated-card.get-token-slots(),
-    $reference: mdc-elevated-card-theme.$light-theme
+  $component: 'm2.mdc.elevated-card',
+  $slots: tokens-mdc-elevated-card.get-token-slots(),
+  $reference: mdc-elevated-card-theme.$light-theme
 );
 @include validate-slots(
-    $component: 'm2.mdc.outlined-card',
-    $slots: tokens-mdc-outlined-card.get-token-slots(),
-    $reference: mdc-outlined-card-theme.$light-theme
+  $component: 'm2.mdc.outlined-card',
+  $slots: tokens-mdc-outlined-card.get-token-slots(),
+  $reference: mdc-outlined-card-theme.$light-theme
 );

src/material/progress-spinner/progress-spinner.scss

@@ -1,36 +1,26 @@
-@use 'sass:map';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '@angular/cdk';
 @use '@material/circular-progress/circular-progress' as mdc-circular-progress;
 @use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
+@use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../core/tokens/m2/mdc/circular-progress' as m2-mdc-circular-progress;
 
+// The slots for tokens that will be configured in the theme can be emitted with no fallback.
+@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
+  $mdc-circular-progress-token-slots: m2-mdc-circular-progress.get-token-slots();
 
-@include mdc-helpers.disable-mdc-fallback-declarations {
-  @include mdc-circular-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-}
-
-.mat-mdc-progress-spinner {
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    @include mdc-circular-progress-theme.theme-styles(map.merge(
-      mdc-circular-progress-theme.$light-theme,
-      (
-        active-indicator-color: transparent,
+  // Add the MDC progress spinner static styles.
+  @include mdc-circular-progress.static-styles();
 
-        // 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,
+  // Add the official slots for the MDC circular progress.
+  @include mdc-circular-progress-theme.theme-styles($mdc-circular-progress-token-slots);
 
-        // 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,
-      )
-    ));
+  // Add default values for tokens that aren't outputted by the theming API.
+  .mat-mdc-progress-spinner {
+    @include mdc-circular-progress-theme.theme(m2-mdc-circular-progress.get-unthemable-tokens());
   }
+}
 
+.mat-mdc-progress-spinner {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
   display: block;
 
@@ -43,7 +33,8 @@
   line-height: 0;
 
   &._mat-animation-noopable {
-    &, .mdc-circular-progress__determinate-circle {
+    &,
+    .mdc-circular-progress__determinate-circle {
       // The spinner itself has a transition on `opacity`.
       transition: none;
     }

src/material/progress-spinner/progress-spinner.spec.ts

@@ -123,10 +123,12 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.diameter = 32;
     fixture.detectChanges();
 
-    expect(parseInt(spinner.style.width))
+    const {width, height} = spinner.getBoundingClientRect();
+
+    expect(width)
       .withContext('Expected the custom diameter to be applied to the host element width.')
       .toBe(32);
-    expect(parseInt(spinner.style.height))
+    expect(height)
       .withContext('Expected the custom diameter to be applied to the host element height.')
       .toBe(32);
     expect(parseInt(svgElement.clientWidth))
@@ -168,11 +170,12 @@ describe('MDC-based MatProgressSpinner', () => {
 
     const spinner = fixture.debugElement.query(By.css('mat-progress-spinner'))!.nativeElement;
     const svgElement: HTMLElement = fixture.nativeElement.querySelector('svg');
+    const {width, height} = spinner.getBoundingClientRect();
 
-    expect(parseFloat(spinner.style.width))
+    expect(width)
       .withContext('Expected the custom diameter to be applied to the host element width.')
       .toBe(32.5);
-    expect(parseFloat(spinner.style.height))
+    expect(height)
       .withContext('Expected the custom diameter to be applied to the host element height.')
       .toBe(32.5);
     expect(Math.ceil(svgElement.clientWidth))
@@ -213,8 +216,10 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.strokeWidth = 40;
     fixture.detectChanges();
 
-    expect(element.style.width).toBe('100px');
-    expect(element.style.height).toBe('100px');
+    const {width, height} = element.getBoundingClientRect();
+
+    expect(width).toBe(100);
+    expect(height).toBe(100);
   });
 
   it('should not collapse the host element if the stroke width is less than the default', () => {
@@ -224,8 +229,10 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.strokeWidth = 5;
     fixture.detectChanges();
 
-    expect(element.style.width).toBe('100px');
-    expect(element.style.height).toBe('100px');
+    const {width, height} = element.getBoundingClientRect();
+
+    expect(width).toBe(100);
+    expect(height).toBe(100);
   });
 
   it('should set the color class on the mat-spinner', () => {
@@ -277,8 +284,10 @@ describe('MDC-based MatProgressSpinner', () => {
     expect(spinner.componentInstance.strokeWidth).toBe(11);
     expect(spinner.componentInstance.value).toBe(25);
 
-    expect(spinner.nativeElement.style.width).toBe('37px');
-    expect(spinner.nativeElement.style.height).toBe('37px');
+    const {width, height} = spinner.nativeElement.getBoundingClientRect();
+
+    expect(width).toBe(37);
+    expect(height).toBe(37);
 
     expect(svgElement.clientWidth).toBe(37);
     expect(svgElement.clientHeight).toBe(37);
@@ -290,8 +299,9 @@ describe('MDC-based MatProgressSpinner', () => {
     let spinner = fixture.debugElement.query(By.directive(MatProgressSpinner))!;
     spinner.componentInstance.diameter = 32;
     fixture.detectChanges();
-    expect(spinner.nativeElement.style.width).toBe('32px');
-    expect(spinner.nativeElement.style.height).toBe('32px');
+    const {width, height} = spinner.nativeElement.getBoundingClientRect();
+    expect(width).toBe(32);
+    expect(height).toBe(32);
   });
 
   it('should be able to set a default diameter', () => {

src/material/progress-spinner/progress-spinner.ts

@@ -80,8 +80,8 @@ const BASE_STROKE_WIDTH = 10;
     'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
-    '[style.width.px]': 'diameter',
-    '[style.height.px]': 'diameter',
+    '[style.--mdc-circular-progress-size]': 'diameter + "px"',
+    '[style.--mdc-circular-progress-active-indicator-width]': 'diameter + "px"',
     '[attr.aria-valuemin]': '0',
     '[attr.aria-valuemax]': '100',
     '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',