From 6ff34d505e2026c8012820226d73b1b1afa89e57 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 17 Jan 2023 19:50:39 -0500 Subject: [PATCH 01/15] Adds basic implementation of Spinner component --- packages/web-components/src/index.ts | 1 + packages/web-components/src/spinner/define.ts | 4 + packages/web-components/src/spinner/index.ts | 5 + .../src/spinner/spinner.definition.ts | 19 ++++ .../src/spinner/spinner.options.ts | 43 +++++++++ .../src/spinner/spinner.stories.ts | 46 +++++++++ .../src/spinner/spinner.styles.ts | 96 +++++++++++++++++++ .../src/spinner/spinner.template.ts | 24 +++++ .../web-components/src/spinner/spinner.ts | 24 +++++ 9 files changed, 262 insertions(+) create mode 100644 packages/web-components/src/spinner/define.ts create mode 100644 packages/web-components/src/spinner/index.ts create mode 100644 packages/web-components/src/spinner/spinner.definition.ts create mode 100644 packages/web-components/src/spinner/spinner.options.ts create mode 100644 packages/web-components/src/spinner/spinner.stories.ts create mode 100644 packages/web-components/src/spinner/spinner.styles.ts create mode 100644 packages/web-components/src/spinner/spinner.template.ts create mode 100644 packages/web-components/src/spinner/spinner.ts diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index dd622fd56e566..2ef45df0a3d2d 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -1 +1,2 @@ +export * from './spinner/index.js'; export * from './text/index.js'; diff --git a/packages/web-components/src/spinner/define.ts b/packages/web-components/src/spinner/define.ts new file mode 100644 index 0000000000000..8bca7912b206c --- /dev/null +++ b/packages/web-components/src/spinner/define.ts @@ -0,0 +1,4 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { definition } from './spinner.definition.js'; + +definition.define(FluentDesignSystem.registry); diff --git a/packages/web-components/src/spinner/index.ts b/packages/web-components/src/spinner/index.ts new file mode 100644 index 0000000000000..2a6c2db892f33 --- /dev/null +++ b/packages/web-components/src/spinner/index.ts @@ -0,0 +1,5 @@ +export * from './spinner.js'; +export * from './spinner.options.js'; +export { template as SpinnerTemplate } from './spinner.template.js'; +export { styles as SpinnerStyles } from './spinner.styles.js'; +export { definition as SpinnerDefinition } from './spinner.definition.js'; diff --git a/packages/web-components/src/spinner/spinner.definition.ts b/packages/web-components/src/spinner/spinner.definition.ts new file mode 100644 index 0000000000000..246eb6832e5e2 --- /dev/null +++ b/packages/web-components/src/spinner/spinner.definition.ts @@ -0,0 +1,19 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { Spinner } from './spinner.js'; +import { styles } from './spinner.styles.js'; +import { template } from './spinner.template.js'; + +/** + * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#ProgressRing }, + * {@link @microsoft/fast-foundation#progress-ringTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = Spinner.compose({ + name: `${FluentDesignSystem.prefix}-spinner`, + template, + styles, +}); diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts new file mode 100644 index 0000000000000..c84f7c03d9103 --- /dev/null +++ b/packages/web-components/src/spinner/spinner.options.ts @@ -0,0 +1,43 @@ +export type Values = T[keyof T]; +/** + * Spinner size options + * @public + */ +export const SpinnerSize = { + /** + * A Spinner's size can be small, tiny, extra-small, medium, large, extra-large, or huge + * + */ + small: 'small', + tiny: 'tiny', + 'extra-small': 'extra-small', + medium: 'medium', + large: 'large', + 'extra-large': 'extra-large', + huge: 'huge', +} as const; + +/** + * Spinner appearance options + * @public + */ +export const SpinnerAppearance = { + /** + * Use the primary appearance when the Spinner is on a light background + * + */ + primary: 'primary', + + /** + * Use the inverted appearance when the Spinner is on a dark background + * + */ + inverted: 'inverted', +} as const; + +/** + * The types for Spinner size and appearance options + * @public + */ +export type SpinnerSize = Values; +export type SpinnerAppearance = Values; diff --git a/packages/web-components/src/spinner/spinner.stories.ts b/packages/web-components/src/spinner/spinner.stories.ts new file mode 100644 index 0000000000000..5b85c038fa1d0 --- /dev/null +++ b/packages/web-components/src/spinner/spinner.stories.ts @@ -0,0 +1,46 @@ +import { html } from '@microsoft/fast-element'; +import type { Args, Meta } from '@storybook/html'; +import { renderComponent } from '../__test__/helpers.js'; +import './define.js'; + +type SpinnerStoryArgs = Args; +type SpinnerStoryMeta = Meta; + +const storyTemplate = html` + x.appearance} size=${x => x.size}> +`; + +export default { + title: 'Web Components/Spinner', + argTypes: { + appearance: { + description: 'The appearance of the spinner', + table: { + defaultValue: { summary: 'primary' }, + }, + control: { + type: 'select', + options: ['primary', 'inverted'], + }, + defaultValue: 'primary', + }, + size: { + description: 'The size of the spinner', + table: { + defaultValue: { summary: 'medium' }, + }, + control: { + type: 'select', + options: ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'], + }, + defaultValue: 'medium', + }, + }, + parameters: { + status: { + type: 'experimental', + }, + }, +} as SpinnerStoryMeta; + +export const Spinner = renderComponent(storyTemplate).bind({}); diff --git a/packages/web-components/src/spinner/spinner.styles.ts b/packages/web-components/src/spinner/spinner.styles.ts new file mode 100644 index 0000000000000..c4061520382f1 --- /dev/null +++ b/packages/web-components/src/spinner/spinner.styles.ts @@ -0,0 +1,96 @@ +import { css } from '@microsoft/fast-element'; +import { display } from '@microsoft/fast-foundation'; +import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js'; + +export const styles = css` + ${display('flex')} + + :host { + display: flex; + align-items: center; + height: 32px; + width: 32px; + } + :host([size='tiny']) { + height: 20px; + width: 20px; + } + :host([size='extra-small']) { + height: 24px; + width: 24px; + } + :host([size='small']) { + height: 28px; + width: 28px; + } + :host([size='large']) { + height: 36px; + width: 36px; + } + :host([size='extra-large']) { + height: 40px; + width: 40px; + } + :host([size='huge']) { + height: 44px; + width: 44px; + } + .progress { + height: 100%; + width: 100%; + } + + .background { + fill: none; + stroke: ${colorBrandStroke2}; + stroke-width: 1.5px; + } + + :host([appearance='inverted']) .background { + stroke: rgba(255, 255, 255, 0.2); + } + + .determinate { + stroke: ${colorBrandStroke1}; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + } + + :host([appearance='inverted']) .determinite { + stroke: ${colorNeutralStrokeOnBrand2}; + } + + .indeterminate-indicator-1 { + stroke: ${colorBrandStroke1}; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + animation: spin-infinite 3s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite; + } + + :host([appearance='inverted']) .indeterminate-indicator-1 { + stroke: ${colorNeutralStrokeOnBrand2}; + } + + @keyframes spin-infinite { + 0% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(0deg); + } + 50% { + stroke-dasharray: 21.99px 21.99px; + transform: rotate(450deg); + } + 100% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(1080deg); + } + } +`; diff --git a/packages/web-components/src/spinner/spinner.template.ts b/packages/web-components/src/spinner/spinner.template.ts new file mode 100644 index 0000000000000..473efe699a828 --- /dev/null +++ b/packages/web-components/src/spinner/spinner.template.ts @@ -0,0 +1,24 @@ +import type { ElementViewTemplate } from '@microsoft/fast-element'; +import { progressRingTemplate } from '@microsoft/fast-foundation'; +import { Spinner } from './spinner.js'; + +export const template: ElementViewTemplate = progressRingTemplate({ + indeterminateIndicator: ` + + + + + `, +}); diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts new file mode 100644 index 0000000000000..9886182a749c1 --- /dev/null +++ b/packages/web-components/src/spinner/spinner.ts @@ -0,0 +1,24 @@ +import { attr } from '@microsoft/fast-element'; +import { FASTProgressRing } from '@microsoft/fast-foundation'; +import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js'; + +export class Spinner extends FASTProgressRing { + /** + * The size of the spinner + * + * @public + * @remarks + * HTML Attribute: size + */ + @attr + public size: SpinnerSize; + + /** + * The appearance of the progress bar + * @public + * @remarks + * HTML Attribute: appearance + */ + @attr + public appearance: SpinnerAppearance; +} From c61e79a607cb64245b0f947804384a807ece7592 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Wed, 18 Jan 2023 16:11:48 -0500 Subject: [PATCH 02/15] Adds inverted Story to Spinner --- .../web-components/src/spinner/spinner.stories.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/spinner/spinner.stories.ts b/packages/web-components/src/spinner/spinner.stories.ts index 5b85c038fa1d0..8b8ed06069aa4 100644 --- a/packages/web-components/src/spinner/spinner.stories.ts +++ b/packages/web-components/src/spinner/spinner.stories.ts @@ -1,6 +1,7 @@ import { html } from '@microsoft/fast-element'; import type { Args, Meta } from '@storybook/html'; import { renderComponent } from '../__test__/helpers.js'; +import { SpinnerAppearance, SpinnerSize } from './spinner.options.js'; import './define.js'; type SpinnerStoryArgs = Args; @@ -20,7 +21,7 @@ export default { }, control: { type: 'select', - options: ['primary', 'inverted'], + options: Object.values(SpinnerAppearance), }, defaultValue: 'primary', }, @@ -31,7 +32,7 @@ export default { }, control: { type: 'select', - options: ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'], + options: Object.values(SpinnerSize), }, defaultValue: 'medium', }, @@ -44,3 +45,9 @@ export default { } as SpinnerStoryMeta; export const Spinner = renderComponent(storyTemplate).bind({}); + +export const SpinnerInverted = renderComponent(html` +
+ +
+`); From dbae4d779b2aa9540d57066a946e1220542ab043 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Wed, 18 Jan 2023 16:14:58 -0500 Subject: [PATCH 03/15] Cleans up some typos --- packages/web-components/src/spinner/spinner.definition.ts | 2 +- packages/web-components/src/spinner/spinner.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/spinner/spinner.definition.ts b/packages/web-components/src/spinner/spinner.definition.ts index 246eb6832e5e2..edb459e352855 100644 --- a/packages/web-components/src/spinner/spinner.definition.ts +++ b/packages/web-components/src/spinner/spinner.definition.ts @@ -4,7 +4,7 @@ import { styles } from './spinner.styles.js'; import { template } from './spinner.template.js'; /** - * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#ProgressRing }, + * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing }, * {@link @microsoft/fast-foundation#progress-ringTemplate} * * diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts index 9886182a749c1..5de22a1342ba4 100644 --- a/packages/web-components/src/spinner/spinner.ts +++ b/packages/web-components/src/spinner/spinner.ts @@ -2,6 +2,10 @@ import { attr } from '@microsoft/fast-element'; import { FASTProgressRing } from '@microsoft/fast-foundation'; import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js'; +/** + * The base class used for constructing a fluent-spinner custom element + * @public + */ export class Spinner extends FASTProgressRing { /** * The size of the spinner From ae1d8e9fb6cb51868c967e6a77e18466409dd7ad Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Thu, 19 Jan 2023 16:30:00 -0500 Subject: [PATCH 04/15] Generates API report --- packages/web-components/docs/api-report.md | 42 ++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 42d325f15e064..b465d2d6d96d9 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -9,6 +9,7 @@ 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 { FASTProgressRing } from '@microsoft/fast-foundation'; import { StartEnd } from '@microsoft/fast-foundation'; import { StartEndOptions } from '@microsoft/fast-foundation'; import { StaticallyComposableHTML } from '@microsoft/fast-foundation'; @@ -221,6 +222,44 @@ export const ProgressBarValidationState: { // @public export type ProgressBarValidationState = ValuesOf; +// @public +export class Spinner extends FASTProgressRing { + appearance: SpinnerAppearance; + size: SpinnerSize; +} + +// @public +export const SpinnerAppearance: { + readonly primary: "primary"; + readonly inverted: "inverted"; +}; + +// @public (undocumented) +export type SpinnerAppearance = Values; + +// @public +export const SpinnerDefinition: FASTElementDefinition; + +// @public +export const SpinnerSize: { + readonly small: "small"; + readonly tiny: "tiny"; + readonly 'extra-small': "extra-small"; + readonly medium: "medium"; + readonly large: "large"; + readonly 'extra-large': "extra-large"; + readonly huge: "huge"; +}; + +// @public +export type SpinnerSize = Values; + +// @public (undocumented) +export const SpinnerStyles: ElementStyles; + +// @public (undocumented) +export const SpinnerTemplate: ElementViewTemplate; + // @public class Text_2 extends FASTElement { align: TextAlign; @@ -296,6 +335,9 @@ export const TextWeight: { // @public export type TextWeight = ValuesOf; +// @public (undocumented) +export type Values = T[keyof T]; + // (No @packageDocumentation comment for this package) ``` From 284913c35d6e1da5b4757508b289dbb682918694 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Thu, 19 Jan 2023 16:31:21 -0500 Subject: [PATCH 05/15] Adds change file --- ...eb-components-b6b8fdad-d432-4c23-871e-ff051099582f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-b6b8fdad-d432-4c23-871e-ff051099582f.json diff --git a/change/@fluentui-web-components-b6b8fdad-d432-4c23-871e-ff051099582f.json b/change/@fluentui-web-components-b6b8fdad-d432-4c23-871e-ff051099582f.json new file mode 100644 index 0000000000000..3293939cda595 --- /dev/null +++ b/change/@fluentui-web-components-b6b8fdad-d432-4c23-871e-ff051099582f.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Adds Spinner as a web component", + "packageName": "@fluentui/web-components", + "email": "ryan@ryanmerrill.net", + "dependentChangeType": "patch" +} From 880130ae24864adda4fe73d024dcd1396126dd23 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 24 Jan 2023 17:22:13 -0500 Subject: [PATCH 06/15] Removes kebab-case for key in Spinner in favor of camelCase; Adds spinner export to package.json; Properly comments spinner options with type docs --- packages/web-components/package.json | 4 ++++ .../web-components/src/spinner/spinner.options.ts | 11 ++++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 6fc45457d8240..37e05dcc28193 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -39,6 +39,10 @@ "./progress-bar": { "types": "./dist/esm/progress-bar/define.d.ts", "default": "./dist/esm/progress-bar/define.js" + }, + "./spinner": { + "types": "./dist/esm/spinner/define.d.ts", + "default": "./dist/esm/spinner/define.js" } }, "scripts": { diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts index c84f7c03d9103..45c78293337ad 100644 --- a/packages/web-components/src/spinner/spinner.options.ts +++ b/packages/web-components/src/spinner/spinner.options.ts @@ -10,10 +10,10 @@ export const SpinnerSize = { */ small: 'small', tiny: 'tiny', - 'extra-small': 'extra-small', + extraSmall: 'extra-small', medium: 'medium', large: 'large', - 'extra-large': 'extra-large', + extraLarge: 'extra-large', huge: 'huge', } as const; @@ -36,8 +36,13 @@ export const SpinnerAppearance = { } as const; /** - * The types for Spinner size and appearance options + * The type for Spinner size option * @public */ export type SpinnerSize = Values; + +/** + * The type for Spinner appearance option + * @public + */ export type SpinnerAppearance = Values; From ee8b57a1b902c7b28f55e03d75ab5aa9915246c3 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Mon, 30 Jan 2023 16:00:05 -0500 Subject: [PATCH 07/15] Address feedback in PR --- .../src/spinner/spinner.options.ts | 36 +++++++++---------- .../src/spinner/spinner.stories.ts | 2 +- .../web-components/src/spinner/spinner.ts | 1 + 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts index 45c78293337ad..1226916cdcaf8 100644 --- a/packages/web-components/src/spinner/spinner.options.ts +++ b/packages/web-components/src/spinner/spinner.options.ts @@ -1,22 +1,4 @@ export type Values = T[keyof T]; -/** - * Spinner size options - * @public - */ -export const SpinnerSize = { - /** - * A Spinner's size can be small, tiny, extra-small, medium, large, extra-large, or huge - * - */ - small: 'small', - tiny: 'tiny', - extraSmall: 'extra-small', - medium: 'medium', - large: 'large', - extraLarge: 'extra-large', - huge: 'huge', -} as const; - /** * Spinner appearance options * @public @@ -46,3 +28,21 @@ export type SpinnerSize = Values; * @public */ export type SpinnerAppearance = Values; + +/** + * Spinner size options + * @public + */ +export const SpinnerSize = { + /** + * A Spinner's size can be small, tiny, extra-small, medium, large, extra-large, or huge + * + */ + tiny: 'tiny', + extraSmall: 'extra-small', + small: 'small', + medium: 'medium', + large: 'large', + extraLarge: 'extra-large', + huge: 'huge', +} as const; diff --git a/packages/web-components/src/spinner/spinner.stories.ts b/packages/web-components/src/spinner/spinner.stories.ts index 8b8ed06069aa4..e160b592207ab 100644 --- a/packages/web-components/src/spinner/spinner.stories.ts +++ b/packages/web-components/src/spinner/spinner.stories.ts @@ -12,7 +12,7 @@ const storyTemplate = html` `; export default { - title: 'Web Components/Spinner', + title: 'Components/Spinner', argTypes: { appearance: { description: 'The appearance of the spinner', diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts index 5de22a1342ba4..14a81afa0249a 100644 --- a/packages/web-components/src/spinner/spinner.ts +++ b/packages/web-components/src/spinner/spinner.ts @@ -20,6 +20,7 @@ export class Spinner extends FASTProgressRing { /** * The appearance of the progress bar * @public + * @default 'medium' * @remarks * HTML Attribute: appearance */ From 3b57680c37fecff3e9186b6506f62f8887f4ec17 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Mon, 30 Jan 2023 16:02:17 -0500 Subject: [PATCH 08/15] Minor typo cleanup --- packages/web-components/src/spinner/spinner.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts index 14a81afa0249a..75a70af5f8949 100644 --- a/packages/web-components/src/spinner/spinner.ts +++ b/packages/web-components/src/spinner/spinner.ts @@ -11,6 +11,7 @@ export class Spinner extends FASTProgressRing { * The size of the spinner * * @public + * @default 'medium' * @remarks * HTML Attribute: size */ @@ -18,9 +19,9 @@ export class Spinner extends FASTProgressRing { public size: SpinnerSize; /** - * The appearance of the progress bar + * The appearance of the spinner * @public - * @default 'medium' + * @default 'primary' * @remarks * HTML Attribute: appearance */ From 401f694ba02d203d93eab99596844ff220b80470 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Mon, 30 Jan 2023 16:13:41 -0500 Subject: [PATCH 09/15] Rebuilds --- packages/web-components/docs/api-report.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index b465d2d6d96d9..907c3888e0469 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -234,26 +234,26 @@ export const SpinnerAppearance: { readonly inverted: "inverted"; }; -// @public (undocumented) +// @public export type SpinnerAppearance = Values; // @public export const SpinnerDefinition: FASTElementDefinition; +// @public +export type SpinnerSize = Values; + // @public export const SpinnerSize: { - readonly small: "small"; readonly tiny: "tiny"; - readonly 'extra-small': "extra-small"; + readonly extraSmall: "extra-small"; + readonly small: "small"; readonly medium: "medium"; readonly large: "large"; - readonly 'extra-large': "extra-large"; + readonly extraLarge: "extra-large"; readonly huge: "huge"; }; -// @public -export type SpinnerSize = Values; - // @public (undocumented) export const SpinnerStyles: ElementStyles; From fc74a37f5e44cbd1342c13638a961f134d68fcdf Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 31 Jan 2023 09:54:08 -0500 Subject: [PATCH 10/15] Adds new API Report --- packages/web-components/docs/api-report.md | 38 ++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index fe34945fa2b26..05dd373c4c65c 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -1352,6 +1352,44 @@ export const spacingVerticalXXS: CSSDesignToken; // @public (undocumented) export const spacingVerticalXXXL: CSSDesignToken; +// @public +export class Spinner extends FASTProgressRing { + appearance: SpinnerAppearance; + size: SpinnerSize; +} + +// @public +export const SpinnerAppearance: { + readonly primary: "primary"; + readonly inverted: "inverted"; +}; + +// @public +export type SpinnerAppearance = Values; + +// @public +export const SpinnerDefinition: FASTElementDefinition; + +// @public +export type SpinnerSize = Values; + +// @public +export const SpinnerSize: { + readonly tiny: "tiny"; + readonly extraSmall: "extra-small"; + readonly small: "small"; + readonly medium: "medium"; + readonly large: "large"; + readonly extraLarge: "extra-large"; + readonly huge: "huge"; +}; + +// @public (undocumented) +export const SpinnerStyles: ElementStyles; + +// @public (undocumented) +export const SpinnerTemplate: ElementViewTemplate; + // @public (undocumented) export const strokeWidthThick: CSSDesignToken; From 8c32938bf4511062a14481277914ebc09ba6ccc1 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Tue, 31 Jan 2023 17:04:02 -0500 Subject: [PATCH 11/15] Rejiggers Spinner option order --- packages/web-components/docs/api-report.md | 6 ++-- .../src/spinner/spinner.options.ts | 31 ++++++------------- 2 files changed, 12 insertions(+), 25 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 05dd373c4c65c..9c1c4c97c036a 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -1370,9 +1370,6 @@ export type SpinnerAppearance = Values; // @public export const SpinnerDefinition: FASTElementDefinition; -// @public -export type SpinnerSize = Values; - // @public export const SpinnerSize: { readonly tiny: "tiny"; @@ -1384,6 +1381,9 @@ export const SpinnerSize: { readonly huge: "huge"; }; +// @public +export type SpinnerSize = Values; + // @public (undocumented) export const SpinnerStyles: ElementStyles; diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts index 1226916cdcaf8..6b5c90dc16e11 100644 --- a/packages/web-components/src/spinner/spinner.options.ts +++ b/packages/web-components/src/spinner/spinner.options.ts @@ -1,43 +1,24 @@ export type Values = T[keyof T]; /** - * Spinner appearance options + * SpinnerAppearance constants * @public */ export const SpinnerAppearance = { - /** - * Use the primary appearance when the Spinner is on a light background - * - */ primary: 'primary', - - /** - * Use the inverted appearance when the Spinner is on a dark background - * - */ inverted: 'inverted', } as const; /** - * The type for Spinner size option - * @public - */ -export type SpinnerSize = Values; - -/** - * The type for Spinner appearance option + * A Spinner's appearance can be either primary or inverted * @public */ export type SpinnerAppearance = Values; /** - * Spinner size options + * SpinnerSize constants * @public */ export const SpinnerSize = { - /** - * A Spinner's size can be small, tiny, extra-small, medium, large, extra-large, or huge - * - */ tiny: 'tiny', extraSmall: 'extra-small', small: 'small', @@ -46,3 +27,9 @@ export const SpinnerSize = { extraLarge: 'extra-large', huge: 'huge', } as const; + +/** + * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge + * @public + */ +export type SpinnerSize = Values; From 77def8dfbec4702695548271399a2670cc7b8f35 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Wed, 1 Feb 2023 19:27:30 -0500 Subject: [PATCH 12/15] Updates ValuesOf in Spinner options to use the new FAST helper --- packages/web-components/src/spinner/spinner.options.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts index 6b5c90dc16e11..b724a48f110c7 100644 --- a/packages/web-components/src/spinner/spinner.options.ts +++ b/packages/web-components/src/spinner/spinner.options.ts @@ -1,3 +1,5 @@ +import { ValuesOf } from '@microsoft/fast-foundation'; + export type Values = T[keyof T]; /** * SpinnerAppearance constants @@ -12,7 +14,7 @@ export const SpinnerAppearance = { * A Spinner's appearance can be either primary or inverted * @public */ -export type SpinnerAppearance = Values; +export type SpinnerAppearance = ValuesOf; /** * SpinnerSize constants @@ -32,4 +34,4 @@ export const SpinnerSize = { * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge * @public */ -export type SpinnerSize = Values; +export type SpinnerSize = ValuesOf; From 192839515b81de6c26e1510948c8f1d5804c992b Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Thu, 2 Feb 2023 14:59:18 -0500 Subject: [PATCH 13/15] Adds API report --- packages/web-components/docs/api-report.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 9c1c4c97c036a..de3c5691b4584 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -1365,7 +1365,7 @@ export const SpinnerAppearance: { }; // @public -export type SpinnerAppearance = Values; +export type SpinnerAppearance = ValuesOf; // @public export const SpinnerDefinition: FASTElementDefinition; @@ -1382,7 +1382,7 @@ export const SpinnerSize: { }; // @public -export type SpinnerSize = Values; +export type SpinnerSize = ValuesOf; // @public (undocumented) export const SpinnerStyles: ElementStyles; From 6e4a6dad2d409bb34cd8821ea9958573c35914bc Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Fri, 3 Feb 2023 14:48:02 -0500 Subject: [PATCH 14/15] Removes stray type line --- packages/web-components/src/spinner/spinner.options.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts index b724a48f110c7..5d1c888833552 100644 --- a/packages/web-components/src/spinner/spinner.options.ts +++ b/packages/web-components/src/spinner/spinner.options.ts @@ -1,6 +1,5 @@ import { ValuesOf } from '@microsoft/fast-foundation'; -export type Values = T[keyof T]; /** * SpinnerAppearance constants * @public From d698710ac32987cfc1e29c322307fce84f60a0b6 Mon Sep 17 00:00:00 2001 From: Ryan Merrill Date: Fri, 3 Feb 2023 15:58:33 -0500 Subject: [PATCH 15/15] Bumps API report --- packages/web-components/docs/api-report.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index de3c5691b4584..aa4ae9ca2ea41 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -1477,9 +1477,6 @@ export const TextWeight: { // @public export type TextWeight = ValuesOf; -// @public (undocumented) -export type Values = T[keyof T]; - // (No @packageDocumentation comment for this package) ```