refactor progress bar to use ElementInternals

change/@fluentui-web-components-6d07cdaf-1af6-4d87-9232-7dd09295ec30.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor progress bar to use ElementInternals",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1888,7 +1888,6 @@ export function display(displayValue: CSSDisplayPropertyValue): string;
 //
 // @public
 export class Divider extends FASTElement {
-    constructor();
     // (undocumented)
     alignContent?: DividerAlignContent;
     // (undocumented)
@@ -2437,13 +2436,28 @@ export const MenuStyles: ElementStyles;
 // @public (undocumented)
 export const MenuTemplate: ElementViewTemplate<Menu>;
 
-// Warning: (ae-forgotten-export) The symbol "BaseProgress" needs to be exported by the entry point index.d.ts
-//
 // @public
-export class ProgressBar extends BaseProgress {
+export class ProgressBar extends FASTElement {
+    // @internal
+    constructor();
+    // @internal (undocumented)
+    connectedCallback(): void;
+    // @internal
+    elementInternals: ElementInternals;
+    max?: number;
+    // (undocumented)
+    protected maxChanged(): void;
+    min?: number;
+    // (undocumented)
+    protected minChanged(): void;
+    // @internal
+    percentComplete: number;
     shape?: ProgressBarShape;
     thickness?: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
+    value?: number | null;
+    // (undocumented)
+    protected valueChanged(): void;
 }
 
 // @public
@@ -2485,12 +2499,6 @@ export const ProgressBarValidationState: {
 // @public
 export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
-// @public
-export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
-    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
-};
-
 // Warning: (ae-forgotten-export) The symbol "FormAssociatedRadio" needs to be exported by the entry point index.d.ts
 //
 // @public

packages/web-components/src/index.ts

@@ -140,7 +140,6 @@ export {
   ProgressBarThickness,
   ProgressBarValidationState,
 } from './progress-bar/index.js';
-export type { ProgressOptions } from './progress-bar/index.js';
 export {
   RadioGroup,
   RadioGroupDefinition,

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

@@ -1,6 +1,5 @@
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
 export { ProgressBar } from './progress-bar.js';
 export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
-export type { ProgressOptions } from './progress-bar.options.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';

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

@@ -46,12 +46,3 @@ export const ProgressBarValidationState = {
  * @public
  */
 export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
-
-/**
- * Progress configuration options
- * @public
- */
-export type ProgressOptions = {
-  indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
-  indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
-};

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

@@ -24,7 +24,7 @@ test.describe('Progress Bar', () => {
 
   // Foundation tests
   test('should include a role of progressbar', async () => {
-    await expect(element).toHaveAttribute('role', 'progressbar');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'progressbar');
   });
 
   test('should set the `aria-valuenow` attribute with the `value` property when provided', async () => {
@@ -34,7 +34,7 @@ test.describe('Progress Bar', () => {
         `;
     });
 
-    await expect(element).toHaveAttribute('aria-valuenow', '50');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '50');
   });
 
   test('should set the `aria-valuemin` attribute with the `min` property when provided', async () => {
@@ -44,7 +44,7 @@ test.describe('Progress Bar', () => {
         `;
     });
 
-    await expect(element).toHaveAttribute('aria-valuemin', '50');
+    await expect(element).toHaveJSProperty('ariaValueMin', '50');
   });
 
   test('should set the `aria-valuemax` attribute with the `max` property when provided', async () => {
@@ -54,31 +54,7 @@ test.describe('Progress Bar', () => {
         `;
     });
 
-    await expect(element).toHaveAttribute('aria-valuemax', '50');
-  });
-
-  test('should render an element with a `determinate` slot when a value is provided', async () => {
-    await root.evaluate(node => {
-      node.innerHTML = /* html */ `
-            <fluent-progress-bar value="50"></fluent-progress-bar>
-        `;
-    });
-
-    const progress = element.locator('.progress');
-
-    await expect(progress).toHaveAttribute('slot', 'determinate');
-  });
-
-  test('should render an element with an `indeterminate` slot when no value is provided', async () => {
-    await root.evaluate(node => {
-      node.innerHTML = /* html */ `
-            <fluent-progress-bar></fluent-progress-bar>
-        `;
-    });
-
-    const progress = element.locator('.progress');
-
-    await expect(progress).toHaveAttribute('slot', 'indeterminate');
+    await expect(element).toHaveJSProperty('ariaValueMax', '50');
   });
 
   test('should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset', async () => {

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

@@ -13,8 +13,7 @@ const storyTemplate = html<ProgressStoryArgs>`
     thickness=${x => x.thickness}
     shape=${x => x.shape}
     max=${x => x.max}
-    aria-valuemax=${x => x.max}
-    aria-valuenow=${x => x.value}
+    min=${x => x.min}
     value=${x => x.value}
     validation-state=${x => x.validationState}
   ></fluent-progress-bar>
@@ -72,26 +71,26 @@ export const Max = renderComponent(html<ProgressStoryArgs>`
   <div>
     <p>
       <code>3 of 10</code>
-      <fluent-progress-bar value="3" aria-valuenow="3" max="10" aria-valuemax="10"></fluent-progress-bar>
+      <fluent-progress-bar value="3" max="10"></fluent-progress-bar>
     </p>
     <p>
       <code>3 o 5</code>
-      <fluent-progress-bar value="3" aria-valuenow="3" max="5" aria-valuemax="5"></fluent-progress-bar>
+      <fluent-progress-bar value="3" max="5"></fluent-progress-bar>
     </p>
   </div>
 `);
 
 export const Value = renderComponent(html<ProgressStoryArgs>`
   <div>
-    <code>0</code><fluent-progress-bar value="0" aria-valuenow="0"></fluent-progress-bar>
+    <code>0</code><fluent-progress-bar value="0"></fluent-progress-bar>
     <code>25</code>
-    <fluent-progress-bar value="25" aria-valuenow="25"></fluent-progress-bar>
+    <fluent-progress-bar value="25"></fluent-progress-bar>
     <code>50</code>
-    <fluent-progress-bar value="50" aria-valuenow="50"></fluent-progress-bar>
+    <fluent-progress-bar value="50"></fluent-progress-bar>
     <code>75</code>
-    <fluent-progress-bar value="75" aria-valuenow="75"></fluent-progress-bar>
+    <fluent-progress-bar value="75"></fluent-progress-bar>
     <code>100</code>
-    <fluent-progress-bar value="100" aria-valuenow="100"></fluent-progress-bar>
+    <fluent-progress-bar value="100"></fluent-progress-bar>
   </div>
 `);