refactor: use css attr func to calculate progress bar width when supp… (#34674)

Author: marchbox

change/@fluentui-web-components-bd1db6ad-f93e-47c2-b55c-4965edcbfb5d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor: use css attr func to calculate progress indicator width",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -707,17 +707,19 @@ export class BaseField extends FASTElement {
 // @public
 export class BaseProgressBar extends FASTElement {
     constructor();
+    // (undocumented)
+    connectedCallback(): void;
     // @internal
     elementInternals: ElementInternals;
+    // @internal (undocumented)
+    indicator: HTMLElement;
     // @internal
     max?: number;
     // @internal
     protected maxChanged(prev: number | undefined, next: number | undefined): void;
     // @internal
     min?: number;
     protected minChanged(prev: number | undefined, next: number | undefined): void;
-    // @internal
-    get percentComplete(): number;
     validationState: ProgressBarValidationState | null;
     validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
     // @internal

packages/web-components/src/progress-bar/progress-bar.base.ts

@@ -1,4 +1,4 @@
-import { attr, FASTElement, nullableNumberConverter, volatile } from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
 import { swapStates } from '../utils/element-internals.js';
 import { ProgressBarValidationState } from './progress-bar.options.js';
 
@@ -9,6 +9,10 @@ import { ProgressBarValidationState } from './progress-bar.options.js';
  * @public
  */
 export class BaseProgressBar extends FASTElement {
+  /** @internal */
+  @observable
+  public indicator!: HTMLElement;
+
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -51,6 +55,7 @@ export class BaseProgressBar extends FASTElement {
    */
   protected valueChanged(prev: number | undefined, next: number | undefined): void {
     this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null;
+    this.setIndicatorWidth();
   }
 
   /**
@@ -69,6 +74,7 @@ export class BaseProgressBar extends FASTElement {
    */
   protected minChanged(prev: number | undefined, next: number | undefined): void {
     this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null;
+    this.setIndicatorWidth();
   }
 
   /**
@@ -88,25 +94,36 @@ export class BaseProgressBar extends FASTElement {
    */
   protected maxChanged(prev: number | undefined, next: number | undefined): void {
     this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null;
+    this.setIndicatorWidth();
   }
 
-  /**
-   * Indicates progress in %
-   * @internal
-   */
-  @volatile
-  public get percentComplete(): number {
+  public constructor() {
+    super();
+
+    this.elementInternals.role = 'progressbar';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setIndicatorWidth();
+  }
+
+  private setIndicatorWidth() {
+    if (!this.$fastController.isConnected || CSS.supports('width: attr(value type(<number>))')) {
+      return;
+    }
+
+    if (Number.isNaN(this.value)) {
+      this.indicator.style.removeProperty('width');
+      return;
+    }
+
     const min = this.min ?? 0;
     const max = this.max ?? 100;
     const value = this.value ?? 0;
     const range = max - min;
+    const width = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
 
-    return range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
-  }
-
-  public constructor() {
-    super();
-
-    this.elementInternals.role = 'progressbar';
+    this.indicator.style.setProperty('width', `${width}%`);
   }
 }

packages/web-components/src/progress-bar/progress-bar.spec.ts

@@ -2,6 +2,10 @@ import { expect, test } from '../../test/playwright/index.js';
 import type { ProgressBar } from './progress-bar.js';
 import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 
+interface BoundingBox {
+  width: number;
+}
+
 test.describe('Progress Bar', () => {
   test.use({
     tagName: 'fluent-progress-bar',
@@ -37,48 +41,58 @@ test.describe('Progress Bar', () => {
     await expect(element).toHaveJSProperty('elementInternals.ariaValueMax', '50');
   });
 
-  test('should set the `percentComplete` property to match the `value` property as a percentage between 0 and 100 when `min` and `max` are unset', async ({
+  test('should set indicator width to match the `value` property as a percentage between 0 and 100 when `min` and `max` are unset', async ({
     fastPage,
   }) => {
     const { element } = fastPage;
+    const indicator = element.locator('.indicator');
 
     await fastPage.setTemplate({ attributes: { value: '50' } });
 
-    await expect(element).toHaveJSProperty('percentComplete', 50);
+    const elementBox = (await element.boundingBox()) as BoundingBox;
+
+    await expect(indicator).toHaveCSS('width', `${elementBox.width / 2}px`);
   });
 
-  test('should set the `percentComplete` property to match the `value` property as a percentage between `min` and `max`', async ({
+  test('should set the indicator width to match the `value` property as a percentage between `min` and `max`', async ({
     fastPage,
   }) => {
     const { element } = fastPage;
+    const indicator = element.locator('.indicator');
 
     await fastPage.setTemplate({ attributes: { value: '0' } });
 
-    await expect(element).toHaveJSProperty('percentComplete', 0);
+    let elementBox = (await element.boundingBox()) as BoundingBox;
+
+    await expect(indicator).toHaveCSS('width', '0px');
 
     await element.evaluate((node: ProgressBar) => {
       node.value = 50;
     });
+    elementBox = (await element.boundingBox()) as BoundingBox;
 
-    await expect(element).toHaveJSProperty('percentComplete', 50);
+    await expect(indicator).toHaveCSS('width', `${elementBox.width / 2}px`);
 
     await element.evaluate((node: ProgressBar) => {
       node.value = 100;
     });
+    elementBox = (await element.boundingBox()) as BoundingBox;
 
-    await expect(element).toHaveJSProperty('percentComplete', 100);
+    await expect(indicator).toHaveCSS('width', `${elementBox.width}px`);
 
     await element.evaluate((node: ProgressBar) => {
       node.max = 200;
     });
+    elementBox = (await element.boundingBox()) as BoundingBox;
 
-    await expect(element).toHaveJSProperty('percentComplete', 50);
+    await expect(indicator).toHaveCSS('width', `${elementBox.width / 2}px`);
 
     await element.evaluate((node: ProgressBar) => {
       node.min = 100;
     });
+    elementBox = (await element.boundingBox()) as BoundingBox;
 
-    await expect(element).toHaveJSProperty('percentComplete', 0);
+    await expect(indicator).toHaveCSS('width', '0px');
   });
 
   test('should set the `thickness` property to match the `thickness` attribute', async ({ fastPage }) => {

packages/web-components/src/progress-bar/progress-bar.styles.ts

@@ -24,6 +24,13 @@ export const styles = css`
     background-color: ${colorNeutralBackground6};
     border-radius: ${borderRadiusMedium};
     contain: content;
+
+    @supports (width: attr(value type(<number>))) {
+      --max: attr(max type(<number>), 100);
+      --min: attr(min type(<number>), 0);
+      --value: attr(value type(<number>), 0);
+      --indicator-width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);
+    }
   }
 
   :host([thickness='large']) {
@@ -42,6 +49,10 @@ export const styles = css`
 
   :host([value]) .indicator {
     transition: all 0.2s ease-in-out;
+
+    @supports (width: attr(value type(<number>))) {
+      width: var(--indicator-width);
+    }
   }
 
   :host(:not([value])) .indicator {

packages/web-components/src/progress-bar/progress-bar.template.ts

@@ -1,15 +1,9 @@
-import { html } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
 import type { ProgressBar } from './progress-bar.js';
 
 export function progressTemplate<T extends ProgressBar>(): ElementViewTemplate<T> {
-  return html`
-    <div
-      class="indicator"
-      part="indicator"
-      style="${x => (typeof x.value === 'number' ? `width: ${x.percentComplete}%` : void 0)}"
-    ></div>
-  `;
+  return html` <div class="indicator" part="indicator" ${ref('indicator')}></div> `;
 }
 
 export const template: ElementViewTemplate<ProgressBar> = progressTemplate();

packages/web-components/src/progress-bar/progress-bar.ts

@@ -1,6 +1,6 @@
 import { attr } from '@microsoft/fast-element';
 import { BaseProgressBar } from './progress-bar.base.js';
-import { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
+import type { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
 
 /**
  * A Progress HTML Element.