diff --git a/change/@fluentui-web-components-6d07cdaf-1af6-4d87-9232-7dd09295ec30.json b/change/@fluentui-web-components-6d07cdaf-1af6-4d87-9232-7dd09295ec30.json new file mode 100644 index 00000000000000..b91ffbbea55267 --- /dev/null +++ b/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": "13071055+chrisdholt@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index a2c2435cb5197a..4b62822c797daa 100644 --- a/packages/web-components/docs/api-report.md +++ b/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,30 @@ export const MenuStyles: ElementStyles; // @public (undocumented) export const MenuTemplate: ElementViewTemplate; -// 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 { + constructor(); + // (undocumented) + connectedCallback(): void; + // @internal + elementInternals: ElementInternals; + // @internal + max?: number; + // (undocumented) + protected maxChanged(): void; + // @internal + min?: number; + // (undocumented) + protected minChanged(): void; + // @internal + percentComplete: number; shape?: ProgressBarShape; thickness?: ProgressBarThickness; validationState: ProgressBarValidationState | null; + // @internal + value?: number | null; + // (undocumented) + protected valueChanged(): void; } // @public @@ -2485,12 +2501,6 @@ export const ProgressBarValidationState: { // @public export type ProgressBarValidationState = ValuesOf; -// @public -export type ProgressOptions = { - indeterminateIndicator1?: StaticallyComposableHTML; - indeterminateIndicator2?: StaticallyComposableHTML; -}; - // Warning: (ae-forgotten-export) The symbol "FormAssociatedRadio" needs to be exported by the entry point index.d.ts // // @public diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 419694b75c2127..7e7e95b5a87752 100644 --- a/packages/web-components/src/index.ts +++ b/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, diff --git a/packages/web-components/src/progress-bar/base-progress.ts b/packages/web-components/src/progress-bar/base-progress.ts deleted file mode 100644 index aaf8411121521a..00000000000000 --- a/packages/web-components/src/progress-bar/base-progress.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element'; - -/** - * A base class for progress components. - * @public - */ -export class BaseProgress extends FASTElement { - /** - * The value of the progress - * @public - * @remarks - * HTML Attribute: value - */ - @attr({ converter: nullableNumberConverter }) - public value!: number | null; - protected valueChanged(): void { - this.updatePercentComplete(); - } - - /** - * The minimum value - * @public - * @remarks - * HTML Attribute: min - */ - @attr({ converter: nullableNumberConverter }) - public min!: number; - protected minChanged(): void { - if (this.$fastController.isConnected) { - this.updatePercentComplete(); - } - } - - /** - * The maximum value - * @public - * @remarks - * HTML Attribute: max - */ - @attr({ converter: nullableNumberConverter }) - public max!: number; - protected maxChanged(): void { - if (this.$fastController.isConnected) { - this.updatePercentComplete(); - } - } - - /** - * Indicates progress in % - * @internal - */ - @observable - public percentComplete: number = 0; - - /** - * @internal - */ - public connectedCallback(): void { - super.connectedCallback(); - this.updatePercentComplete(); - } - - private updatePercentComplete(): void { - const min: number = typeof this.min === 'number' ? this.min : 0; - const max: number = typeof this.max === 'number' ? this.max : 100; - const value: number = typeof this.value === 'number' ? this.value : 0; - const range: number = max - min; - - this.percentComplete = range === 0 ? 0 : Math.fround(((value - min) / range) * 100); - } -} diff --git a/packages/web-components/src/progress-bar/index.ts b/packages/web-components/src/progress-bar/index.ts index 3cef34b54fff4c..c28ec85507de3c 100644 --- a/packages/web-components/src/progress-bar/index.ts +++ b/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'; diff --git a/packages/web-components/src/progress-bar/progress-bar.options.ts b/packages/web-components/src/progress-bar/progress-bar.options.ts index 96b4d74b635cd0..9b1e5a27e13c96 100644 --- a/packages/web-components/src/progress-bar/progress-bar.options.ts +++ b/packages/web-components/src/progress-bar/progress-bar.options.ts @@ -46,12 +46,3 @@ export const ProgressBarValidationState = { * @public */ export type ProgressBarValidationState = ValuesOf; - -/** - * Progress configuration options - * @public - */ -export type ProgressOptions = { - indeterminateIndicator1?: StaticallyComposableHTML; - indeterminateIndicator2?: StaticallyComposableHTML; -}; diff --git a/packages/web-components/src/progress-bar/progress-bar.spec.ts b/packages/web-components/src/progress-bar/progress-bar.spec.ts index 119ce516ef0ae3..65503d977f6d90 100644 --- a/packages/web-components/src/progress-bar/progress-bar.spec.ts +++ b/packages/web-components/src/progress-bar/progress-bar.spec.ts @@ -1,102 +1,70 @@ import { expect, test } from '@playwright/test'; -import type { Locator, Page } from '@playwright/test'; import { fixtureURL } from '../helpers.tests.js'; import type { ProgressBar } from './progress-bar.js'; test.describe('Progress Bar', () => { - let page: Page; - let element: Locator; - let root: Locator; - - test.beforeAll(async ({ browser }) => { - page = await browser.newPage(); - - element = page.locator('fluent-progress-bar'); - - root = page.locator('#root'); - + test.beforeEach(async ({ page }) => { await page.goto(fixtureURL('components-progressbar--progress')); - }); - test.afterAll(async () => { - await page.close(); + await page.waitForFunction(() => customElements.whenDefined('fluent-progress-bar')); }); - // Foundation tests - test('should include a role of progressbar', async () => { - await expect(element).toHaveAttribute('role', 'progressbar'); - }); + test('should include a role of progressbar', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); - test('should set the `aria-valuenow` attribute with the `value` property when provided', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); - - await expect(element).toHaveAttribute('aria-valuenow', '50'); + await expect(element).toHaveJSProperty('elementInternals.role', 'progressbar'); }); - test('should set the `aria-valuemin` attribute with the `min` property when provided', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); + test('should set the `aria-valuenow` attribute with the `value` property when provided', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); - await expect(element).toHaveAttribute('aria-valuemin', '50'); - }); + await page.setContent(/* html */ ` + + `); - test('should set the `aria-valuemax` attribute with the `max` property when provided', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); - - await expect(element).toHaveAttribute('aria-valuemax', '50'); + await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '50'); }); - test('should render an element with a `determinate` slot when a value is provided', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); + test('should set the `aria-valuemin` attribute with the `min` property when provided', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); - const progress = element.locator('.progress'); + await page.setContent(/* html */ ` + + `); - await expect(progress).toHaveAttribute('slot', 'determinate'); + await expect(element).toHaveJSProperty('elementInternals.ariaValueMin', '50'); }); - test('should render an element with an `indeterminate` slot when no value is provided', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); + test('should set the `aria-valuemax` attribute with the `max` property when provided', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); - const progress = element.locator('.progress'); + await page.setContent(/* html */ ` + + `); - await expect(progress).toHaveAttribute('slot', 'indeterminate'); + await expect(element).toHaveJSProperty('elementInternals.ariaValueMax', '50'); }); - test('should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); + test('should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset', async ({ + page, + }) => { + const element = page.locator('fluent-progress-bar'); + + await page.setContent(/* html */ ` + + `); await expect(element).toHaveJSProperty('percentComplete', 50); }); - test('should set the `percentComplete` property to match the current `value` in the range of `min` and `max`', async () => { - await root.evaluate(node => { - node.innerHTML = /* html */ ` - - `; - }); + test('should set the `percentComplete` property to match the current `value` in the range of `min` and `max`', async ({ + page, + }) => { + const element = page.locator('fluent-progress-bar'); + + await page.setContent(/* html */ ` + + `); await expect(element).toHaveJSProperty('percentComplete', 0); @@ -125,8 +93,9 @@ test.describe('Progress Bar', () => { await expect(element).toHaveJSProperty('percentComplete', 0); }); - // Fluent Specific propertiy tests - test('should set and retrieve the `thickness` property correctly', async () => { + test('should set and retrieve the `thickness` property correctly', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); + await element.evaluate((node: ProgressBar) => { node.thickness = 'medium'; }); @@ -140,7 +109,9 @@ test.describe('Progress Bar', () => { await expect(element).toHaveJSProperty('thickness', 'large'); }); - test('should set and retrieve the `shape` property correctly', async () => { + test('should set and retrieve the `shape` property correctly', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); + await element.evaluate((node: ProgressBar) => { node.shape = 'square'; }); @@ -154,7 +125,9 @@ test.describe('Progress Bar', () => { await expect(element).toHaveJSProperty('shape', 'rounded'); }); - test('should set and retrieve the `validationState` property correctly', async () => { + test('should set and retrieve the `validationState` property correctly', async ({ page }) => { + const element = page.locator('fluent-progress-bar'); + await element.evaluate((node: ProgressBar) => { node.validationState = 'success'; }); diff --git a/packages/web-components/src/progress-bar/progress-bar.stories.ts b/packages/web-components/src/progress-bar/progress-bar.stories.ts index 77e2347757131c..9e697bf08485f0 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -13,8 +13,7 @@ const storyTemplate = html` 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} > @@ -72,26 +71,26 @@ export const Max = renderComponent(html`

3 of 10 - +

- 3 o 5 - + 3 of 5 +

`); export const Value = renderComponent(html`
- 0 + 0 25 - + 50 - + 75 - + 100 - +
`); diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts index 3898d93b1b9869..ab3295c6c4d6af 100644 --- a/packages/web-components/src/progress-bar/progress-bar.styles.ts +++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts @@ -2,184 +2,103 @@ import { css } from '@microsoft/fast-element'; import { display, forcedColorsStylesheetBehavior } from '../utils/index.js'; import { borderRadiusMedium, - colorBrandBackground2, + borderRadiusNone, colorCompoundBrandBackground, colorNeutralBackground6, - colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, - colorPaletteGreenBackground2, colorPaletteGreenBackground3, - colorPaletteRedBackground2, colorPaletteRedBackground3, + colorTransparentBackground, } from '../theme/design-tokens.js'; /** ProgressBar styles * @public */ export const styles = css` - ${display('flex')} + ${display('block')} :host { - align-items: center; + width: 100%; height: 2px; overflow-x: hidden; + background-color: ${colorNeutralBackground6}; border-radius: ${borderRadiusMedium}; contain: content; } - :host([thickness='large']), - :host([thickness='large']) .progress, - :host([thickness='large']) .determinate { + :host([thickness='large']) { height: 4px; } - :host([shape='square']), - :host([shape='square']) .progress, - :host([shape='square']) .determinate { - border-radius: 0; + :host([shape='square']) { + border-radius: ${borderRadiusNone}; } - :host([validation-state='error']) .determinate { - background-color: ${colorPaletteRedBackground3}; - } - - :host([validation-state='error']) .indeterminate-indicator-1, - :host([validation-state='error']) .indeterminate-indicator-2 { - background: linear-gradient( - to right, - ${colorPaletteRedBackground2} 0%, - ${colorPaletteRedBackground3} 50%, - ${colorPaletteRedBackground2} - ); - } - - :host([validation-state='warning']) .determinate { - background-color: ${colorPaletteDarkOrangeBackground3}; - } - - :host([validation-state='warning']) .indeterminate-indicator-1, - :host([validation-state='warning']) .indeterminate-indicator-2 { - background: linear-gradient( - to right, - ${colorPaletteDarkOrangeBackground2} 0%, - ${colorPaletteDarkOrangeBackground3} 50%, - ${colorPaletteDarkOrangeBackground2} - ); + .indicator { + background-color: ${colorCompoundBrandBackground}; + border-radius: inherit; + height: 100%; } - :host([validation-state='success']) .determinate { - background-color: ${colorPaletteGreenBackground3}; + :host([value]) .indicator { + transition: all 0.2s ease-in-out; } - :host([validation-state='success']) .indeterminate-indicator-1, - :host([validation-state='success']) .indeterminate-indicator-2 { - background: linear-gradient( + :host(:not([value])) .indicator { + position: relative; + width: 33%; + background-image: linear-gradient( to right, - ${colorPaletteGreenBackground2} 0%, - ${colorPaletteGreenBackground3} 50%, - ${colorPaletteGreenBackground2} + ${colorNeutralBackground6} 0%, + ${colorTransparentBackground} 50%, + ${colorNeutralBackground6} 100% ); + animation-name: indeterminate; + animation-duration: 3s; + animation-timing-function: linear; + animation-iteration-count: infinite; } - .progress { - background-color: ${colorNeutralBackground6}; - border-radius: ${borderRadiusMedium}; - width: 100%; - height: 2px; - display: flex; - align-items: center; - position: relative; - } - - .determinate { - background-color: ${colorCompoundBrandBackground}; - border-radius: ${borderRadiusMedium}; - height: 2px; - transition: all 0.2s ease-in-out; - display: flex; + :host([validation-state='error']) .indicator { + background-color: ${colorPaletteRedBackground3}; } - .indeterminate-indicator-1 { - position: absolute; - opacity: 0; - height: 100%; - background: linear-gradient( - to right, - ${colorBrandBackground2} 0%, - ${colorCompoundBrandBackground} 50%, - ${colorBrandBackground2} - ); - border-radius: ${borderRadiusMedium}; - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - width: 40%; - animation: indeterminate-1 3s infinite; + :host([validation-state='warning']) .indicator { + background-color: ${colorPaletteDarkOrangeBackground3}; } - .indeterminate-indicator-2 { - position: absolute; - opacity: 0; - height: 100%; - background: linear-gradient( - to right, - ${colorBrandBackground2} 0%, - ${colorCompoundBrandBackground} 50%, - ${colorBrandBackground2} - ); - border-radius: ${borderRadiusMedium}; - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - width: 60%; - animation: indeterminate-2 3s infinite; + :host([validation-state='success']) .indicator { + background-color: ${colorPaletteGreenBackground3}; } - @keyframes indeterminate-1 { - 0% { - opacity: 1; - transform: translateX(-100%); - } - 70% { - opacity: 1; - transform: translateX(300%); - } - 70.01% { - opacity: 0; - } - 100% { - opacity: 0; - transform: translateX(300%); + @layer animations { + /* Disable animations for reduced motion */ + @media (prefers-reduced-motion: no-preference) { + :host([value]) { + transition: none; + } + :host(:not([value])) .indicator { + animation-duration: 0.01ms; + animation-iteration-count: 1; + } } } - @keyframes indeterminate-2 { + + @keyframes indeterminate { 0% { - opacity: 0; - transform: translateX(-150%); - } - 29.99% { - opacity: 0; - } - 30% { - opacity: 1; - transform: translateX(-150%); + inset-inline-start: -33%; } 100% { - transform: translateX(166.66%); - opacity: 1; + inset-inline-start: 100%; } } `.withBehaviors( forcedColorsStylesheetBehavior(css` - .progress { - background-color: HighlightText; + :host { + background-color: CanvasText; } - .determinate, - :host([validation-state='success']) .determinate, - :host([validation-state='warning']) .determinate, - :host([validation-state='error']) .determinate, - :host([validation-state='success']) ..indeterminate-indicator-1, - :host([validation-state='success']) ..indeterminate-indicator-2, - :host([validation-state='warning']) .indeterminate-indicator-1, - :host([validation-state='warning']) .indeterminate-indicator-2, - :host([validation-state='error']) .indeterminate-indicator-1, - :host([validation-state='error']) .indeterminate-indicator-2 { + .indicator, + :host(:is([validation-state='success'], [validation-state='warning'], [validation-state='error'])) .indicator { background-color: Highlight; } `), diff --git a/packages/web-components/src/progress-bar/progress-bar.template.ts b/packages/web-components/src/progress-bar/progress-bar.template.ts index 9be9714c5c959a..f81062f5f8c5c8 100644 --- a/packages/web-components/src/progress-bar/progress-bar.template.ts +++ b/packages/web-components/src/progress-bar/progress-bar.template.ts @@ -1,38 +1,15 @@ -import { html, when } from '@microsoft/fast-element'; +import { html } from '@microsoft/fast-element'; import type { ElementViewTemplate } from '@microsoft/fast-element'; -import { staticallyCompose } from '../utils/template-helpers.js'; -import type { ProgressOptions } from './progress-bar.options.js'; import type { ProgressBar } from './progress-bar.js'; -export function progressTemplate(options: ProgressOptions = {}): ElementViewTemplate { +export function progressTemplate(): ElementViewTemplate { return html` - +
`; } -export const template: ElementViewTemplate = progressTemplate({ - indeterminateIndicator1: ``, -}); +export const template: ElementViewTemplate = progressTemplate(); diff --git a/packages/web-components/src/progress-bar/progress-bar.ts b/packages/web-components/src/progress-bar/progress-bar.ts index c582f6d1b1625f..c432005cd57550 100644 --- a/packages/web-components/src/progress-bar/progress-bar.ts +++ b/packages/web-components/src/progress-bar/progress-bar.ts @@ -1,25 +1,25 @@ -import { attr } from '@microsoft/fast-element'; -import { BaseProgress } from './base-progress.js'; +import { attr, FASTElement, nullableNumberConverter, volatile } from '@microsoft/fast-element'; import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js'; /** * An Progress HTML Element. * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }. * - * @slot indeterminate - The slot for a custom indeterminate indicator - * @csspart progress - Represents the progress element - * @csspart determinate - The determinate indicator - * @csspart indeterminate - The indeterminate indicator - * * @public */ -export class ProgressBar extends BaseProgress { +export class ProgressBar 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 - * @remarks - * HTML Attribute: thickness + * HTML Attribute: `thickness` */ @attr public thickness?: ProgressBarThickness; @@ -27,8 +27,7 @@ export class ProgressBar extends BaseProgress { /** * The shape of the progress bar * @public - * @remarks - * HTML Attribute: shape + * HTML Attribute: `shape` */ @attr public shape?: ProgressBarShape; @@ -36,9 +35,82 @@ export class ProgressBar extends BaseProgress { /** * The validation state of the progress bar * @public - * @remarks - * HTML Attribute: validation-state + * HTML Attribute: `validation-state` */ @attr({ attribute: 'validation-state' }) public validationState: ProgressBarValidationState | null = null; + + /** + * The value of the progress + * @internal + * HTML Attribute: `value` + */ + @attr({ converter: nullableNumberConverter }) + public value?: number; + + /** + * Updates the percent complete when the `value` property changes. + * + * @internal + */ + protected valueChanged(prev: number | undefined, next: number | undefined): void { + this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null; + } + + /** + * The minimum value + * @internal + * HTML Attribute: `min` + */ + @attr({ converter: nullableNumberConverter }) + public min?: number; + + /** + * Updates the percent complete when the `min` property changes. + * + * @param prev - The previous min value + * @param next - The current min value + */ + protected minChanged(prev: number | undefined, next: number | undefined): void { + this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null; + } + + /** + * The maximum value + * @internal + * HTML Attribute: `max` + */ + @attr({ converter: nullableNumberConverter }) + public max?: number; + + /** + * Updates the percent complete when the `max` property changes. + * + * @param prev - The previous max value + * @param next - The current max value + * @internal + */ + protected maxChanged(prev: number | undefined, next: number | undefined): void { + this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null; + } + + /** + * Indicates progress in % + * @internal + */ + @volatile + public get percentComplete(): number { + const min = this.min ?? 0; + const max = this.max ?? 100; + const value = this.value ?? 0; + const range = max - min; + + return range === 0 ? 0 : Math.fround(((value - min) / range) * 100); + } + + public constructor() { + super(); + + this.elementInternals.role = 'progressbar'; + } }