From 59c84e6cab086cc7ee6aafb5f05db71a3af2f6b9 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Thu, 12 Jan 2023 16:23:24 -0500 Subject: [PATCH 01/16] Adds web component version of ProgressBar --- packages/web-components/src/index.ts | 1 + .../web-components/src/progressbar/define.ts | 4 + .../web-components/src/progressbar/index.ts | 5 + .../src/progressbar/progressbar.definition.ts | 18 ++ .../src/progressbar/progressbar.options.ts | 48 ++++++ .../src/progressbar/progressbar.stories.ts | 83 ++++++++++ .../src/progressbar/progressbar.styles.ts | 156 ++++++++++++++++++ .../src/progressbar/progressbar.template.ts | 8 + .../src/progressbar/progressbar.ts | 33 ++++ 9 files changed, 356 insertions(+) create mode 100644 packages/web-components/src/progressbar/define.ts create mode 100644 packages/web-components/src/progressbar/index.ts create mode 100644 packages/web-components/src/progressbar/progressbar.definition.ts create mode 100644 packages/web-components/src/progressbar/progressbar.options.ts create mode 100644 packages/web-components/src/progressbar/progressbar.stories.ts create mode 100644 packages/web-components/src/progressbar/progressbar.styles.ts create mode 100644 packages/web-components/src/progressbar/progressbar.template.ts create mode 100644 packages/web-components/src/progressbar/progressbar.ts diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index dd622fd56e5669..fc015eb3731e08 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -1 +1,2 @@ export * from './text/index.js'; +export * from './progressbar/index.js'; diff --git a/packages/web-components/src/progressbar/define.ts b/packages/web-components/src/progressbar/define.ts new file mode 100644 index 00000000000000..65ffa38721e8fd --- /dev/null +++ b/packages/web-components/src/progressbar/define.ts @@ -0,0 +1,4 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { definition } from './progressbar.definition.js'; + +definition.define(FluentDesignSystem.registry); diff --git a/packages/web-components/src/progressbar/index.ts b/packages/web-components/src/progressbar/index.ts new file mode 100644 index 00000000000000..1acb54b665211e --- /dev/null +++ b/packages/web-components/src/progressbar/index.ts @@ -0,0 +1,5 @@ +export * from './progressbar.js'; +export * from './progressbar.options.js'; +export { template as ProgressBarTemplate } from './progressbar.template.js'; +export { styles as ProgressBarStyles } from './progressbar.styles.js'; +export { definition as ProgressBarDefinition } from './progressbar.definition.js'; diff --git a/packages/web-components/src/progressbar/progressbar.definition.ts b/packages/web-components/src/progressbar/progressbar.definition.ts new file mode 100644 index 00000000000000..ba028be8fd688f --- /dev/null +++ b/packages/web-components/src/progressbar/progressbar.definition.ts @@ -0,0 +1,18 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { ProgressBar } from './progressbar.js'; +import { styles } from './progressbar.styles.js'; +import { template } from './progressbar.template.js'; + +/** + * The Fluent ProgressBar Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = ProgressBar.compose({ + name: `${FluentDesignSystem.prefix}-progressbar`, + template, + styles, +}); diff --git a/packages/web-components/src/progressbar/progressbar.options.ts b/packages/web-components/src/progressbar/progressbar.options.ts new file mode 100644 index 00000000000000..82f136d5dcf1bf --- /dev/null +++ b/packages/web-components/src/progressbar/progressbar.options.ts @@ -0,0 +1,48 @@ +import { ValuesOf } from '@microsoft/fast-foundation'; + +/** + * ProgressBarThickness Constants + * @public + */ +export const ProgressBarThickness = { + medium: 'medium', + large: 'large', +} as const; + +/** + * Applies bar thickness to the content + * @public + */ +export type ProgressBarThickness = ValuesOf; + +/** + * ProgressBarShape Constants + * @public + */ +export const ProgressBarShape = { + rounded: 'rounded', + rectangular: 'rectangular', +} as const; + +/** + * Applies bar shape to the content + * @public + */ +export type ProgressBarShape = ValuesOf; + +/** + * ProgressBarValidationState Constants + * @public + */ +export const ProgressBarValidationState = { + null: null, + success: 'success', + warning: 'warning', + error: 'error', +} as const; + +/** + * Applies validation state to the content + * @public + */ +export type ProgressBarValidationState = ValuesOf; diff --git a/packages/web-components/src/progressbar/progressbar.stories.ts b/packages/web-components/src/progressbar/progressbar.stories.ts new file mode 100644 index 00000000000000..8075d9e641846e --- /dev/null +++ b/packages/web-components/src/progressbar/progressbar.stories.ts @@ -0,0 +1,83 @@ +import { html } from '@microsoft/fast-element'; +import type { Args, Meta } from '@storybook/html'; +import { renderComponent } from '../__test__/helpers.js'; +import type { ProgressBar as FluentProgressBar } from './progressbar.js'; +import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progressbar.options.js'; +import './define.js'; + +type ProgressStoryArgs = Args & FluentProgressBar; +type ProgressStoryMeta = Meta; + +const storyTemplate = html` + x.paused} + thickness=${x => x.thickness} + shape=${x => x.shape} + min=${x => x.min} + max=${x => x.max} + aria-valuemin=${x => x.min} + aria-valuemax=${x => x.max} + aria-valuenow=${x => x.value} + value=${x => x.value} + validation-state=${x => x.validationState} + aria-label="Progress bar" + > +`; + +export default { + title: 'Components/ProgressBar', + args: { + min: 0, + max: 100, + value: 15, + thickness: 'medium', + shape: 'rounded', + paused: false, + validationState: '', + }, + argTypes: { + min: { + control: 'number', + defaultValue: 0, + }, + max: { + control: 'number', + defaultValue: 100, + }, + value: { + control: 'number', + defaultValue: 15, + }, + thickness: { + control: { + type: 'select', + }, + options: Object.keys(ProgressBarThickness), + defaultValue: 'medium', + }, + shape: { + options: Object.keys(ProgressBarShape), + control: { + type: 'select', + }, + defaultValue: 'rounded', + }, + paused: { + control: 'boolean', + defaultValue: false, + }, + validationState: { + options: Object.keys(ProgressBarValidationState), + control: { + type: 'select', + }, + defaultValue: '', + }, + }, +} as ProgressStoryMeta; + +export const Progress = renderComponent(storyTemplate).bind({}); + +export const ProgressIndeterminate = renderComponent(html` + +`); diff --git a/packages/web-components/src/progressbar/progressbar.styles.ts b/packages/web-components/src/progressbar/progressbar.styles.ts new file mode 100644 index 00000000000000..8a79e6eb8aed47 --- /dev/null +++ b/packages/web-components/src/progressbar/progressbar.styles.ts @@ -0,0 +1,156 @@ +import { css } from '@microsoft/fast-element'; +import { display } from '@microsoft/fast-foundation'; +import { + borderRadiusMedium, + colorBrandBackground2, + colorCompoundBrandBackground, + colorNeutralBackground6, + colorPaletteDarkOrangeBackground3, + colorPaletteGreenBackground3, + colorPaletteRedBackground3, +} from '../theme/design-tokens.js'; + +/** Text styles + * @public + */ +export const styles = css` + ${display('flex')} + + :host { + --progress-bar-thickness: 2px; + --progress-bar-radius: ${borderRadiusMedium}; + --progress-bar-color: ${colorCompoundBrandBackground}; + --progress-speed: 3s; + + display: flex; + align-items: center; + height: var(--progress-bar-thickness); + overflow-x: hidden; + } + + :host([thickness='large']) { + --progress-bar-thickness: 4px; + } + + :host([shape='rectangular']) { + --progress-bar-radius: 0; + } + + :host([validation-state='error']) { + --progress-bar-color: ${colorPaletteRedBackground3}; + } + + :host([validation-state='warning']) { + --progress-bar-color: ${colorPaletteDarkOrangeBackground3}; + } + + :host([validation-state='success']) { + --progress-bar-color: ${colorPaletteGreenBackground3}; + } + + .progress { + background-color: ${colorNeutralBackground6}; + border-radius: var(--progress-bar-radius); + width: 100%; + height: var(--progress-bar-thickness); + display: flex; + align-items: center; + position: relative; + } + + .determinate { + background-color: var(--progress-bar-color); + border-radius: var(--progress-bar-radius); + height: var(--progress-bar-thickness); + transition: all 0.2s ease-in-out; + display: flex; + } + + .indeterminate { + height: 6px; + border-radius: var(--progress-bar-radius); + display: flex; + width: 100%; + position: relative; + overflow: hidden; + } + + .indeterminate-indicator-1 { + position: absolute; + opacity: 0; + height: 100%; + background: linear-gradient( + to right, + ${colorBrandBackground2} 0%, + ${colorCompoundBrandBackground} 50%, + ${colorBrandBackground2} + ); + border-radius: var(--progress-bar-radius); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + width: 40%; + animation: indeterminate-1 var(--progress-speed) infinite; + } + + .indeterminate-indicator-2 { + position: absolute; + opacity: 0; + height: 100%; + background: linear-gradient( + to right, + ${colorBrandBackground2} 0%, + ${colorCompoundBrandBackground} 50%, + ${colorBrandBackground2} + ); + border-radius: var(--progress-bar-radius); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + width: 60%; + animation: indeterminate-2 var(--progress-speed) infinite; + } + + :host(.paused) .indeterminate-indicator-1, + :host(.paused) .indeterminate-indicator-2 { + animation: none; + background-color: ${colorNeutralBackground6}; + width: 100%; + opacity: 1; + } + + :host([paused]) .determinate { + background-color: var(--progress-bar-color); + } + + @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%); + } + } + @keyframes indeterminate-2 { + 0% { + opacity: 0; + transform: translateX(-150%); + } + 29.99% { + opacity: 0; + } + 30% { + opacity: 1; + transform: translateX(-150%); + } + 100% { + transform: translateX(166.66%); + opacity: 1; + } + } +`; diff --git a/packages/web-components/src/progressbar/progressbar.template.ts b/packages/web-components/src/progressbar/progressbar.template.ts new file mode 100644 index 00000000000000..f939b0c7343fc5 --- /dev/null +++ b/packages/web-components/src/progressbar/progressbar.template.ts @@ -0,0 +1,8 @@ +import type { ElementViewTemplate } from '@microsoft/fast-element'; +import { progressTemplate } from '@microsoft/fast-foundation'; +import type { ProgressBar } from './progressbar.js'; + +export const template: ElementViewTemplate = progressTemplate({ + indeterminateIndicator1: ``, +}); diff --git a/packages/web-components/src/progressbar/progressbar.ts b/packages/web-components/src/progressbar/progressbar.ts new file mode 100644 index 00000000000000..6cdce2543f3c5b --- /dev/null +++ b/packages/web-components/src/progressbar/progressbar.ts @@ -0,0 +1,33 @@ +import { attr } from '@microsoft/fast-element'; +import { FASTProgress } from '@microsoft/fast-foundation'; +import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progressbar.options.js'; + +export class ProgressBar extends FASTProgress { + /** + * The thickness of the progress bar + * + * @public + * @remarks + * HTML Attribute: thickness + */ + @attr + public thickness: ProgressBarThickness = 'medium'; + + /** + * The shape of the progress bar + * @public + * @remarks + * HTML Attribute: shape + */ + @attr + public shape: ProgressBarShape = 'rounded'; + + /** + * The validation state of the progress bar + * @public + * @remarks + * HTML Attribute: validation-state + */ + @attr({ attribute: 'validation-state' }) + public validationState: ProgressBarValidationState = null; +} From 60c7f67aa18d201baf26a49f825ef685c06ba968 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Thu, 12 Jan 2023 16:26:02 -0500 Subject: [PATCH 02/16] Generates change --- ...eb-components-d423d05a-1b1e-422f-ab9a-afc288197681.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-d423d05a-1b1e-422f-ab9a-afc288197681.json diff --git a/change/@fluentui-web-components-d423d05a-1b1e-422f-ab9a-afc288197681.json b/change/@fluentui-web-components-d423d05a-1b1e-422f-ab9a-afc288197681.json new file mode 100644 index 00000000000000..cd6c5c717b6275 --- /dev/null +++ b/change/@fluentui-web-components-d423d05a-1b1e-422f-ab9a-afc288197681.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "add progressbar as new component", + "packageName": "@fluentui/web-components", + "email": "ryan@ryanmerrill.net", + "dependentChangeType": "patch" +} From 600337a4f211b3b3862415dd1969a1fe1d4a70d1 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Sat, 14 Jan 2023 10:28:30 -0500 Subject: [PATCH 03/16] Renames progressbar to progress-bar --- packages/web-components/src/index.ts | 2 +- .../{progressbar => progress-bar}/define.ts | 2 +- .../web-components/src/progress-bar/index.ts | 5 +++++ .../progress-bar/progress-bar.definition.ts | 18 ++++++++++++++++++ .../progress-bar.options.ts} | 0 .../progress-bar.stories.ts} | 10 +++++----- .../progress-bar.styles.ts} | 0 .../progress-bar.template.ts} | 2 +- .../progress-bar.ts} | 2 +- .../web-components/src/progressbar/index.ts | 5 ----- .../src/progressbar/progressbar.definition.ts | 18 ------------------ 11 files changed, 32 insertions(+), 32 deletions(-) rename packages/web-components/src/{progressbar => progress-bar}/define.ts (65%) create mode 100644 packages/web-components/src/progress-bar/index.ts create mode 100644 packages/web-components/src/progress-bar/progress-bar.definition.ts rename packages/web-components/src/{progressbar/progressbar.options.ts => progress-bar/progress-bar.options.ts} (100%) rename packages/web-components/src/{progressbar/progressbar.stories.ts => progress-bar/progress-bar.stories.ts} (89%) rename packages/web-components/src/{progressbar/progressbar.styles.ts => progress-bar/progress-bar.styles.ts} (100%) rename packages/web-components/src/{progressbar/progressbar.template.ts => progress-bar/progress-bar.template.ts} (88%) rename packages/web-components/src/{progressbar/progressbar.ts => progress-bar/progress-bar.ts} (93%) delete mode 100644 packages/web-components/src/progressbar/index.ts delete mode 100644 packages/web-components/src/progressbar/progressbar.definition.ts diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index fc015eb3731e08..dfdef61c48dece 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -1,2 +1,2 @@ export * from './text/index.js'; -export * from './progressbar/index.js'; +export * from './progress-bar/index.js'; diff --git a/packages/web-components/src/progressbar/define.ts b/packages/web-components/src/progress-bar/define.ts similarity index 65% rename from packages/web-components/src/progressbar/define.ts rename to packages/web-components/src/progress-bar/define.ts index 65ffa38721e8fd..a0bf72c3f6d6a9 100644 --- a/packages/web-components/src/progressbar/define.ts +++ b/packages/web-components/src/progress-bar/define.ts @@ -1,4 +1,4 @@ import { FluentDesignSystem } from '../fluent-design-system.js'; -import { definition } from './progressbar.definition.js'; +import { definition } from './progress-bar.definition.js'; definition.define(FluentDesignSystem.registry); diff --git a/packages/web-components/src/progress-bar/index.ts b/packages/web-components/src/progress-bar/index.ts new file mode 100644 index 00000000000000..e37f1144ce9f44 --- /dev/null +++ b/packages/web-components/src/progress-bar/index.ts @@ -0,0 +1,5 @@ +export * from './progress-bar.js'; +export * from './progress-bar.options.js'; +export { template as ProgressBarTemplate } from './progress-bar.template.js'; +export { styles as ProgressBarStyles } from './progress-bar.styles.js'; +export { definition as ProgressBarDefinition } from './progress-bar.definition.js'; diff --git a/packages/web-components/src/progress-bar/progress-bar.definition.ts b/packages/web-components/src/progress-bar/progress-bar.definition.ts new file mode 100644 index 00000000000000..0e0afa49b1aa5c --- /dev/null +++ b/packages/web-components/src/progress-bar/progress-bar.definition.ts @@ -0,0 +1,18 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { ProgressBar } from './progress-bar.js'; +import { styles } from './progress-bar.styles.js'; +import { template } from './progress-bar.template.js'; + +/** + * The Fluent ProgressBar Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = ProgressBar.compose({ + name: `${FluentDesignSystem.prefix}-progress-bar`, + template, + styles, +}); diff --git a/packages/web-components/src/progressbar/progressbar.options.ts b/packages/web-components/src/progress-bar/progress-bar.options.ts similarity index 100% rename from packages/web-components/src/progressbar/progressbar.options.ts rename to packages/web-components/src/progress-bar/progress-bar.options.ts diff --git a/packages/web-components/src/progressbar/progressbar.stories.ts b/packages/web-components/src/progress-bar/progress-bar.stories.ts similarity index 89% rename from packages/web-components/src/progressbar/progressbar.stories.ts rename to packages/web-components/src/progress-bar/progress-bar.stories.ts index 8075d9e641846e..5bcd06cdf5f473 100644 --- a/packages/web-components/src/progressbar/progressbar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -1,15 +1,15 @@ import { html } from '@microsoft/fast-element'; import type { Args, Meta } from '@storybook/html'; import { renderComponent } from '../__test__/helpers.js'; -import type { ProgressBar as FluentProgressBar } from './progressbar.js'; -import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progressbar.options.js'; +import type { ProgressBar as FluentProgressBar } from './progress-bar.js'; +import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js'; import './define.js'; type ProgressStoryArgs = Args & FluentProgressBar; type ProgressStoryMeta = Meta; const storyTemplate = html` - x.paused} thickness=${x => x.thickness} shape=${x => x.shape} @@ -21,7 +21,7 @@ const storyTemplate = html` value=${x => x.value} validation-state=${x => x.validationState} aria-label="Progress bar" - > + > `; export default { @@ -79,5 +79,5 @@ export default { export const Progress = renderComponent(storyTemplate).bind({}); export const ProgressIndeterminate = renderComponent(html` - + `); diff --git a/packages/web-components/src/progressbar/progressbar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts similarity index 100% rename from packages/web-components/src/progressbar/progressbar.styles.ts rename to packages/web-components/src/progress-bar/progress-bar.styles.ts diff --git a/packages/web-components/src/progressbar/progressbar.template.ts b/packages/web-components/src/progress-bar/progress-bar.template.ts similarity index 88% rename from packages/web-components/src/progressbar/progressbar.template.ts rename to packages/web-components/src/progress-bar/progress-bar.template.ts index f939b0c7343fc5..acf300205766e2 100644 --- a/packages/web-components/src/progressbar/progressbar.template.ts +++ b/packages/web-components/src/progress-bar/progress-bar.template.ts @@ -1,6 +1,6 @@ import type { ElementViewTemplate } from '@microsoft/fast-element'; import { progressTemplate } from '@microsoft/fast-foundation'; -import type { ProgressBar } from './progressbar.js'; +import type { ProgressBar } from './progress-bar.js'; export const template: ElementViewTemplate = progressTemplate({ indeterminateIndicator1: ` Date: Sat, 14 Jan 2023 10:35:53 -0500 Subject: [PATCH 10/16] Removes null in validation state object --- packages/web-components/src/progress-bar/progress-bar.options.ts | 1 - 1 file changed, 1 deletion(-) 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 82f136d5dcf1bf..a46cdf6c36fa49 100644 --- a/packages/web-components/src/progress-bar/progress-bar.options.ts +++ b/packages/web-components/src/progress-bar/progress-bar.options.ts @@ -35,7 +35,6 @@ export type ProgressBarShape = ValuesOf; * @public */ export const ProgressBarValidationState = { - null: null, success: 'success', warning: 'warning', error: 'error', From f05ff02213daac00d78521e3f507f0d3b84a3014 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 17 Jan 2023 14:55:34 -0500 Subject: [PATCH 11/16] Removes local CSS variables; Removes defaults on thickness and rounded corners --- .../src/progress-bar/progress-bar.stories.ts | 1 - .../src/progress-bar/progress-bar.styles.ts | 86 +++++++++++++------ .../src/progress-bar/progress-bar.ts | 4 +- 3 files changed, 62 insertions(+), 29 deletions(-) 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 09eae56ef2bbbe..339a9dd7a6f6c8 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -18,7 +18,6 @@ const storyTemplate = html` aria-valuemin=${x => x.min} aria-valuemax=${x => x.max} aria-valuenow=${x => x.value} - value=${x => x.value} validation-state=${x => x.validationState} aria-label="Progress bar" > 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 1c6883475561e8..abc3a56e32ecbe 100644 --- a/packages/web-components/src/progress-bar/progress-bar.styles.ts +++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts @@ -5,8 +5,11 @@ import { colorBrandBackground2, colorCompoundBrandBackground, colorNeutralBackground6, + colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, + colorPaletteGreenBackground2, colorPaletteGreenBackground3, + colorPaletteRedBackground2, colorPaletteRedBackground3, } from '../theme/design-tokens.js'; @@ -17,56 +20,87 @@ export const styles = css` ${display('flex')} :host { - --progress-bar-thickness: 2px; - --progress-bar-radius: ${borderRadiusMedium}; - --progress-bar-color: ${colorCompoundBrandBackground}; - --progress-speed: 3s; align-items: center; - height: var(--progress-bar-thickness); + height: 2px; overflow-x: hidden; + border-radius: ${borderRadiusMedium}; } - :host([thickness='large']) { - --progress-bar-thickness: 4px; + :host([thickness='large']), + :host([thickness='large']) .progress, + :host([thickness='large']) .determinate { + height: 4px; } - :host([shape='rectangular']) { - --progress-bar-radius: 0; + :host([shape='rectangular']), + :host([shape='rectangular']) .progress, + :host([shape='rectangular']) .determinate { + border-radius: 0; } - :host([validation-state='error']) { - --progress-bar-color: ${colorPaletteRedBackground3}; + :host([validation-state='error']) .determinate { + background-color: ${colorPaletteRedBackground3}; } - :host([validation-state='warning']) { - --progress-bar-color: ${colorPaletteDarkOrangeBackground3}; + :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='success']) { - --progress-bar-color: ${colorPaletteGreenBackground3}; + :host([validation-state='warning']) .indeterminate-indicator-1, + :host([validation-state='warning']) .indeterminate-indicator-2 { + background: linear-gradient( + to right, + ${colorPaletteDarkOrangeBackground2} 0%, + ${colorPaletteDarkOrangeBackground3} 50%, + ${colorPaletteDarkOrangeBackground2} + ); + } + + :host([validation-state='success']) .determinate { + background-color: ${colorPaletteGreenBackground3}; + } + + :host([validation-state='success']) .indeterminate-indicator-1, + :host([validation-state='success']) .indeterminate-indicator-2 { + background: linear-gradient( + to right, + ${colorPaletteGreenBackground2} 0%, + ${colorPaletteGreenBackground3} 50%, + ${colorPaletteGreenBackground2} + ); } .progress { background-color: ${colorNeutralBackground6}; - border-radius: var(--progress-bar-radius); + border-radius: ${borderRadiusMedium}; width: 100%; - height: var(--progress-bar-thickness); + height: 2px; display: flex; align-items: center; position: relative; } .determinate { - background-color: var(--progress-bar-color); - border-radius: var(--progress-bar-radius); - height: var(--progress-bar-thickness); + background-color: ${colorCompoundBrandBackground}; + border-radius: ${borderRadiusMedium}; + height: 2px; transition: all 0.2s ease-in-out; display: flex; } .indeterminate { height: 6px; - border-radius: var(--progress-bar-radius); + border-radius: ${borderRadiusMedium}; display: flex; width: 100%; position: relative; @@ -83,10 +117,10 @@ export const styles = css` ${colorCompoundBrandBackground} 50%, ${colorBrandBackground2} ); - border-radius: var(--progress-bar-radius); + border-radius: ${borderRadiusMedium}; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); width: 40%; - animation: indeterminate-1 var(--progress-speed) infinite; + animation: indeterminate-1 3s infinite; } .indeterminate-indicator-2 { @@ -99,10 +133,10 @@ export const styles = css` ${colorCompoundBrandBackground} 50%, ${colorBrandBackground2} ); - border-radius: var(--progress-bar-radius); + border-radius: ${borderRadiusMedium}; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); width: 60%; - animation: indeterminate-2 var(--progress-speed) infinite; + animation: indeterminate-2 3s infinite; } :host([paused]) .indeterminate-indicator-1, @@ -114,7 +148,7 @@ export const styles = css` } :host([paused]) .determinate { - background-color: var(--progress-bar-color); + background-color: ${colorCompoundBrandBackground}; } @keyframes indeterminate-1 { diff --git a/packages/web-components/src/progress-bar/progress-bar.ts b/packages/web-components/src/progress-bar/progress-bar.ts index fda724ee673b26..aff1a3e153638a 100644 --- a/packages/web-components/src/progress-bar/progress-bar.ts +++ b/packages/web-components/src/progress-bar/progress-bar.ts @@ -15,7 +15,7 @@ export class ProgressBar extends FASTProgress { * HTML Attribute: thickness */ @attr - public thickness: ProgressBarThickness = 'medium'; + public thickness: ProgressBarThickness; /** * The shape of the progress bar @@ -24,7 +24,7 @@ export class ProgressBar extends FASTProgress { * HTML Attribute: shape */ @attr - public shape: ProgressBarShape = 'rounded'; + public shape: ProgressBarShape; /** * The validation state of the progress bar From 0988572183a42d555f9187580529552f5441a644 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 17 Jan 2023 15:22:10 -0500 Subject: [PATCH 12/16] Removes unused CSS --- .../src/progress-bar/progress-bar.stories.ts | 1 + .../src/progress-bar/progress-bar.styles.ts | 9 --------- 2 files changed, 1 insertion(+), 9 deletions(-) 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 339a9dd7a6f6c8..09eae56ef2bbbe 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -18,6 +18,7 @@ const storyTemplate = html` aria-valuemin=${x => x.min} aria-valuemax=${x => x.max} aria-valuenow=${x => x.value} + value=${x => x.value} validation-state=${x => x.validationState} aria-label="Progress bar" > 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 abc3a56e32ecbe..e9bdf7299ea76c 100644 --- a/packages/web-components/src/progress-bar/progress-bar.styles.ts +++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts @@ -98,15 +98,6 @@ export const styles = css` display: flex; } - .indeterminate { - height: 6px; - border-radius: ${borderRadiusMedium}; - display: flex; - width: 100%; - position: relative; - overflow: hidden; - } - .indeterminate-indicator-1 { position: absolute; opacity: 0; From d8ff7179bf1d051fab1a7595cdae9b10e81d1779 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 17 Jan 2023 16:00:02 -0500 Subject: [PATCH 13/16] Removes unused options, pause and min, that don't exist in Fluent --- .../src/progress-bar/progress-bar.stories.ts | 13 ------------- .../src/progress-bar/progress-bar.styles.ts | 12 ------------ 2 files changed, 25 deletions(-) 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 09eae56ef2bbbe..e5a68b86c55415 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -10,12 +10,9 @@ type ProgressStoryMeta = Meta; const storyTemplate = html` x.paused} thickness=${x => x.thickness} shape=${x => x.shape} - min=${x => x.min} max=${x => x.max} - aria-valuemin=${x => x.min} aria-valuemax=${x => x.max} aria-valuenow=${x => x.value} value=${x => x.value} @@ -27,19 +24,13 @@ const storyTemplate = html` export default { title: 'Components/ProgressBar', args: { - min: 0, max: 100, value: 15, thickness: 'medium', shape: 'rounded', - paused: false, validationState: '', }, argTypes: { - min: { - control: 'number', - defaultValue: 0, - }, max: { control: 'number', defaultValue: 100, @@ -62,10 +53,6 @@ export default { }, defaultValue: 'rounded', }, - paused: { - control: 'boolean', - defaultValue: false, - }, validationState: { options: Object.keys(ProgressBarValidationState), control: { 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 e9bdf7299ea76c..9d1baf966c3998 100644 --- a/packages/web-components/src/progress-bar/progress-bar.styles.ts +++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts @@ -130,18 +130,6 @@ export const styles = css` animation: indeterminate-2 3s infinite; } - :host([paused]) .indeterminate-indicator-1, - :host([paused]) .indeterminate-indicator-2 { - animation: none; - background-color: ${colorNeutralBackground6}; - width: 100%; - opacity: 1; - } - - :host([paused]) .determinate { - background-color: ${colorCompoundBrandBackground}; - } - @keyframes indeterminate-1 { 0% { opacity: 1; From 9532a3229ee04dd675c7054788262d18425b2221 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Wed, 18 Jan 2023 13:15:15 -0500 Subject: [PATCH 14/16] Addresses remaining feedback on PR: Renames rect to square; Cleans up Storybook --- .../src/progress-bar/progress-bar.options.ts | 2 +- .../src/progress-bar/progress-bar.stories.ts | 7 +++---- .../web-components/src/progress-bar/progress-bar.styles.ts | 6 +++--- 3 files changed, 7 insertions(+), 8 deletions(-) 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 a46cdf6c36fa49..21e5947c609529 100644 --- a/packages/web-components/src/progress-bar/progress-bar.options.ts +++ b/packages/web-components/src/progress-bar/progress-bar.options.ts @@ -21,7 +21,7 @@ export type ProgressBarThickness = ValuesOf; */ export const ProgressBarShape = { rounded: 'rounded', - rectangular: 'rectangular', + square: 'square', } as const; /** 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 e5a68b86c55415..7dc865047a86f9 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -17,7 +17,6 @@ const storyTemplate = html` aria-valuenow=${x => x.value} value=${x => x.value} validation-state=${x => x.validationState} - aria-label="Progress bar" > `; @@ -43,18 +42,18 @@ export default { control: { type: 'select', }, - options: Object.keys(ProgressBarThickness), + options: Object.values(ProgressBarThickness), defaultValue: 'medium', }, shape: { - options: Object.keys(ProgressBarShape), + options: Object.values(ProgressBarShape), control: { type: 'select', }, defaultValue: 'rounded', }, validationState: { - options: Object.keys(ProgressBarValidationState), + options: Object.values(ProgressBarValidationState), control: { type: 'select', }, 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 9d1baf966c3998..281d19ffb5545b 100644 --- a/packages/web-components/src/progress-bar/progress-bar.styles.ts +++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts @@ -32,9 +32,9 @@ export const styles = css` height: 4px; } - :host([shape='rectangular']), - :host([shape='rectangular']) .progress, - :host([shape='rectangular']) .determinate { + :host([shape='square']), + :host([shape='square']) .progress, + :host([shape='square']) .determinate { border-radius: 0; } From 7de2f2e33f71f777b3a06e4592b1c67d754c546d Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Wed, 18 Jan 2023 15:01:22 -0500 Subject: [PATCH 15/16] Fixes Storybook type error --- .../web-components/src/progress-bar/progress-bar.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 7dc865047a86f9..bd9203fff8c268 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -27,7 +27,7 @@ export default { value: 15, thickness: 'medium', shape: 'rounded', - validationState: '', + validationState: null, }, argTypes: { max: { @@ -57,7 +57,7 @@ export default { control: { type: 'select', }, - defaultValue: '', + defaultValue: null, }, }, } as ProgressStoryMeta; From d55df453ed38dd4516172df921a6c4f227100f32 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Wed, 18 Jan 2023 15:43:59 -0500 Subject: [PATCH 16/16] Runs build to generate api-report to fix failing build --- packages/web-components/docs/api-report.md | 45 ++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 2796247c3e5727..42d325f15e0644 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -8,6 +8,7 @@ import { ElementStyles } from '@microsoft/fast-element'; import { ElementViewTemplate } from '@microsoft/fast-element'; import { FASTElement } from '@microsoft/fast-element'; import { FASTElementDefinition } from '@microsoft/fast-element'; +import { FASTProgress } from '@microsoft/fast-foundation'; import { StartEnd } from '@microsoft/fast-foundation'; import { StartEndOptions } from '@microsoft/fast-foundation'; import { StaticallyComposableHTML } from '@microsoft/fast-foundation'; @@ -176,6 +177,50 @@ export const CounterBadgeStyles: ElementStyles; // @public export const CounterBadgeTemplate: ElementViewTemplate; +// @public +export class ProgressBar extends FASTProgress { + shape: ProgressBarShape; + thickness: ProgressBarThickness; + validationState: ProgressBarValidationState | null; +} + +// @public +export const ProgressBarDefinition: FASTElementDefinition; + +// @public +export const ProgressBarShape: { + readonly rounded: "rounded"; + readonly square: "square"; +}; + +// @public +export type ProgressBarShape = ValuesOf; + +// @public +export const ProgressBarStyles: ElementStyles; + +// @public (undocumented) +export const ProgressBarTemplate: ElementViewTemplate; + +// @public +export const ProgressBarThickness: { + readonly medium: "medium"; + readonly large: "large"; +}; + +// @public +export type ProgressBarThickness = ValuesOf; + +// @public +export const ProgressBarValidationState: { + readonly success: "success"; + readonly warning: "warning"; + readonly error: "error"; +}; + +// @public +export type ProgressBarValidationState = ValuesOf; + // @public class Text_2 extends FASTElement { align: TextAlign;