[Chore]: Create Progress Bar base class to abstract out style and layout specific api.

change/@fluentui-web-components-43000c2b-1b77-4f30-ae7c-d15355739430.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: create base class for progress bar and remove style and layout specfic api",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -508,6 +508,28 @@ export class BaseDivider extends FASTElement {
     roleChanged(previous: string | null, next: string | null): void;
 }
 
+// @public
+export class BaseProgressBar extends FASTElement {
+    constructor();
+    // @internal
+    elementInternals: ElementInternals;
+    // @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
+    value?: number;
+    // @internal
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
+}
+
 // @public
 export const borderRadiusCircular = "var(--borderRadiusCircular)";
 
@@ -2587,29 +2609,11 @@ export const MenuStyles: ElementStyles;
 export const MenuTemplate: ElementViewTemplate<Menu>;
 
 // @public
-export class ProgressBar extends FASTElement {
-    constructor();
-    // @internal
-    elementInternals: ElementInternals;
-    // @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;
+export class ProgressBar extends BaseProgressBar {
     shape?: ProgressBarShape;
     shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
     thickness?: ProgressBarThickness;
     thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void;
-    validationState: ProgressBarValidationState | null;
-    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
-    // @internal
-    value?: number;
-    // @internal
-    protected valueChanged(prev: number | undefined, next: number | undefined): void;
 }
 
 // @public

packages/web-components/src/index.ts

@@ -144,6 +144,7 @@ export type { MenuItemColumnCount, MenuItemOptions } from './menu-item/index.js'
 export { MenuList, MenuListDefinition, MenuListStyles, MenuListTemplate } from './menu-list/index.js';
 export { Menu, MenuDefinition, MenuStyles, MenuTemplate } from './menu/index.js';
 export {
+  BaseProgressBar,
   ProgressBar,
   ProgressBarDefinition,
   ProgressBarShape,

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

@@ -1,5 +1,5 @@
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
-export { ProgressBar } from './progress-bar.js';
+export { BaseProgressBar, ProgressBar } from './progress-bar.js';
 export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } 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.ts

@@ -3,64 +3,19 @@ import { toggleState } from '../utils/element-internals.js';
 import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 
 /**
- * An Progress HTML Element.
+ * A Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
  * @public
  */
-export class ProgressBar extends FASTElement {
+export class BaseProgressBar extends FASTElement {
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
    * @internal
    */
   public elementInternals: ElementInternals = this.attachInternals();
 
-  /**
-   * The thickness of the progress bar
-   *
-   * @public
-   * HTML Attribute: `thickness`
-   */
-  @attr
-  public thickness?: ProgressBarThickness;
-
-  /**
-   * Handles changes to thickness attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  public thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-
-  /**
-   * The shape of the progress bar
-   * @public
-   * HTML Attribute: `shape`
-   */
-  @attr
-  public shape?: ProgressBarShape;
-
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  public shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-
   /**
    * The validation state of the progress bar
    * @public
@@ -160,3 +115,56 @@ export class ProgressBar extends FASTElement {
     this.elementInternals.role = 'progressbar';
   }
 }
+
+/**
+ * A Progress HTML Element.
+ * Based on BaseProgressBar and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class ProgressBar extends BaseProgressBar {
+  /**
+   * The thickness of the progress bar
+   *
+   * @public
+   * HTML Attribute: `thickness`
+   */
+  @attr
+  public thickness?: ProgressBarThickness;
+
+  /**
+   * Handles changes to thickness attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
+  /**
+   * The shape of the progress bar
+   * @public
+   * HTML Attribute: `shape`
+   */
+  @attr
+  public shape?: ProgressBarShape;
+
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+}