From 70a2130d8da26aeb3f67c87d1b2f65e75d660497 Mon Sep 17 00:00:00 2001 From: jeff smith Date: Mon, 22 Jul 2024 17:35:07 -0600 Subject: [PATCH 1/2] base classs for progress bar --- packages/web-components/docs/api-report.md | 42 ++++---- packages/web-components/src/index.ts | 1 + .../web-components/src/progress-bar/index.ts | 2 +- .../src/progress-bar/progress-bar.ts | 102 ++++++++++-------- 4 files changed, 80 insertions(+), 67 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index cb83027a16922b..d6b0785e62146c 100644 --- a/packages/web-components/docs/api-report.md +++ b/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; // @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 diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 2c3c4e78437922..19256952fc70b1 100644 --- a/packages/web-components/src/index.ts +++ b/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, diff --git a/packages/web-components/src/progress-bar/index.ts b/packages/web-components/src/progress-bar/index.ts index c28ec85507de3c..cbb65301c3bd77 100644 --- a/packages/web-components/src/progress-bar/index.ts +++ b/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'; diff --git a/packages/web-components/src/progress-bar/progress-bar.ts b/packages/web-components/src/progress-bar/progress-bar.ts index 5d0bf6a4f2a460..bb13fa57909cb3 100644 --- a/packages/web-components/src/progress-bar/progress-bar.ts +++ b/packages/web-components/src/progress-bar/progress-bar.ts @@ -3,12 +3,12 @@ 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. * @@ -16,51 +16,6 @@ export class ProgressBar extends FASTElement { */ 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); + } + } +} From 511a5df6fa0c363d48fa5624a15351338b1364eb Mon Sep 17 00:00:00 2001 From: jeff smith Date: Mon, 22 Jul 2024 17:36:31 -0600 Subject: [PATCH 2/2] change file --- ...eb-components-43000c2b-1b77-4f30-ae7c-d15355739430.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-43000c2b-1b77-4f30-ae7c-d15355739430.json diff --git a/change/@fluentui-web-components-43000c2b-1b77-4f30-ae7c-d15355739430.json b/change/@fluentui-web-components-43000c2b-1b77-4f30-ae7c-d15355739430.json new file mode 100644 index 00000000000000..a2b23525522eb5 --- /dev/null +++ b/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" +}