From 2122979a03f4b1ce855bc2184ee3cf64a2af6635 Mon Sep 17 00:00:00 2001 From: Jeff Smith <37851214+eljefe223@users.noreply.github.com> Date: Thu, 8 Feb 2024 20:15:53 -0800 Subject: [PATCH] feat: removes dependency on fast-foundation templates and classes. (#30090) --- ...-b0669382-c509-4801-bd44-9849e8570a92.json | 7 + packages/web-components/docs/api-report.md | 685 +++++++++++++--- .../accordion-item.definition.ts | 3 - .../accordion-item/accordion-item.options.ts | 2 +- .../accordion-item/accordion-item.template.ts | 54 +- .../src/accordion-item/accordion-item.ts | 107 ++- .../src/accordion/accordion.definition.ts | 4 - .../src/accordion/accordion.options.ts | 16 + .../src/accordion/accordion.template.ts | 14 +- .../web-components/src/accordion/accordion.ts | 248 +++++- .../anchor-button/anchor-button.definition.ts | 3 - .../anchor-button/anchor-button.options.ts | 23 +- .../anchor-button/anchor-button.template.ts | 54 +- .../src/anchor-button/anchor-button.ts | 153 +++- .../src/avatar/avatar.options.ts | 2 +- .../src/badge/badge.definition.ts | 3 - .../web-components/src/badge/badge.options.ts | 4 +- .../src/badge/badge.template.ts | 4 +- packages/web-components/src/badge/badge.ts | 2 +- .../src/button/button.definition.ts | 3 - .../src/button/button.form-associated.ts | 13 + .../src/button/button.options.ts | 29 +- .../src/button/button.template.ts | 53 +- packages/web-components/src/button/button.ts | 231 +++++- .../src/checkbox/checkbox.form-associated.ts | 13 + .../src/checkbox/checkbox.options.ts | 2 +- .../src/checkbox/checkbox.template.ts | 46 +- .../web-components/src/checkbox/checkbox.ts | 84 +- .../compound-button.definition.ts | 3 - .../compound-button.options.ts | 4 +- .../compound-button.template.ts | 2 +- .../counter-badge/counter-badge.definition.ts | 4 - .../counter-badge/counter-badge.options.ts | 2 +- .../src/counter-badge/counter-badge.ts | 2 +- .../src/dialog/dialog.options.ts | 2 +- .../src/divider/divider.options.ts | 34 +- .../src/divider/divider.template.ts | 15 +- .../web-components/src/divider/divider.ts | 29 +- .../src/form-associated/form-associated.ts | 757 ++++++++++++++++++ .../web-components/src/image/image.options.ts | 2 +- .../web-components/src/label/label.options.ts | 2 +- .../src/menu-button/menu-button.definition.ts | 3 - .../src/menu-button/menu-button.options.ts | 4 +- .../src/menu-button/menu-button.template.ts | 2 +- .../src/menu-item/menu-item.definition.ts | 4 - .../src/menu-item/menu-item.options.ts | 39 + .../src/menu-item/menu-item.template.ts | 71 +- .../web-components/src/menu-item/menu-item.ts | 360 ++++++++- .../src/menu-list/menu-list.definition.ts | 4 - .../src/menu-list/menu-list.template.ts | 16 +- .../web-components/src/menu-list/menu-list.ts | 316 +++++++- .../src/patterns/aria-globals.ts | 230 ++++++ packages/web-components/src/patterns/index.ts | 2 + .../web-components/src/patterns/start-end.ts | 62 ++ .../src/progress-bar/base-progress.ts | 71 ++ .../src/progress-bar/progress-bar.options.ts | 12 +- .../src/progress-bar/progress-bar.template.ts | 32 +- .../src/progress-bar/progress-bar.ts | 15 +- .../progress-ring/progress-ring.options.ts | 10 + .../src/progress-ring/progress-ring.ts | 15 + .../web-components/src/radio-group/index.ts | 1 - .../src/radio-group/radio-group.options.ts | 14 + .../src/radio-group/radio-group.stories.ts | 2 +- .../src/radio-group/radio-group.template.ts | 33 +- .../src/radio-group/radio-group.ts | 414 +++++++++- .../src/radio/radio.form-associated.ts | 13 + .../src/radio/radio.template.ts | 33 +- packages/web-components/src/radio/radio.ts | 121 ++- .../src/slider/slider-utilities.ts | 17 + .../src/slider/slider.form-associated.ts | 13 + .../src/slider/slider.options.ts | 49 +- .../src/slider/slider.template.ts | 44 +- packages/web-components/src/slider/slider.ts | 526 +++++++++++- .../src/spinner/spinner.definition.ts | 4 - .../src/spinner/spinner.options.ts | 2 +- .../src/spinner/spinner.template.ts | 35 +- .../web-components/src/spinner/spinner.ts | 4 +- .../src/switch/switch.form-associated.ts | 13 + .../src/switch/switch.options.ts | 2 +- .../src/switch/switch.template.ts | 30 +- packages/web-components/src/switch/switch.ts | 71 +- .../src/tab-panel/tab-panel.template.ts | 11 +- .../web-components/src/tab-panel/tab-panel.ts | 4 +- .../web-components/src/tab/tab.template.ts | 6 +- packages/web-components/src/tab/tab.ts | 26 +- .../web-components/src/tabs/tabs.options.ts | 24 +- .../web-components/src/tabs/tabs.stories.ts | 3 +- .../web-components/src/tabs/tabs.template.ts | 18 +- packages/web-components/src/tabs/tabs.ts | 336 +++++++- .../web-components/src/text-input/index.ts | 1 - .../text-input/text-field.form-associated.ts | 13 + .../src/text-input/text-input.options.ts | 39 +- .../src/text-input/text-input.template.ts | 69 +- .../src/text-input/text-input.ts | 251 +++++- .../web-components/src/text/text.options.ts | 2 +- .../toggle-button/toggle-button.definition.ts | 2 - .../toggle-button/toggle-button.options.ts | 4 +- .../toggle-button/toggle-button.template.ts | 2 +- .../web-components/src/utils/direction.ts | 15 + packages/web-components/src/utils/index.ts | 4 + .../src/utils/template-helpers.ts | 40 + packages/web-components/src/utils/typings.ts | 8 + .../src/utils/whitespace-filter.ts | 16 + 103 files changed, 6007 insertions(+), 316 deletions(-) create mode 100644 change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json create mode 100644 packages/web-components/src/accordion/accordion.options.ts create mode 100644 packages/web-components/src/button/button.form-associated.ts create mode 100644 packages/web-components/src/checkbox/checkbox.form-associated.ts create mode 100644 packages/web-components/src/form-associated/form-associated.ts create mode 100644 packages/web-components/src/menu-item/menu-item.options.ts create mode 100644 packages/web-components/src/patterns/aria-globals.ts create mode 100644 packages/web-components/src/patterns/index.ts create mode 100644 packages/web-components/src/patterns/start-end.ts create mode 100644 packages/web-components/src/progress-bar/base-progress.ts create mode 100644 packages/web-components/src/progress-ring/progress-ring.options.ts create mode 100644 packages/web-components/src/progress-ring/progress-ring.ts create mode 100644 packages/web-components/src/radio-group/radio-group.options.ts create mode 100644 packages/web-components/src/radio/radio.form-associated.ts create mode 100644 packages/web-components/src/slider/slider-utilities.ts create mode 100644 packages/web-components/src/slider/slider.form-associated.ts create mode 100644 packages/web-components/src/switch/switch.form-associated.ts create mode 100644 packages/web-components/src/text-input/text-field.form-associated.ts create mode 100644 packages/web-components/src/utils/direction.ts create mode 100644 packages/web-components/src/utils/index.ts create mode 100644 packages/web-components/src/utils/template-helpers.ts create mode 100644 packages/web-components/src/utils/typings.ts create mode 100644 packages/web-components/src/utils/whitespace-filter.ts diff --git a/change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json b/change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json new file mode 100644 index 00000000000000..77a57797f6f18a --- /dev/null +++ b/change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Removes dependancy on fast-foundation classes and templates", + "packageName": "@fluentui/web-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 042a9ff09a728b..2cf13edf679c07 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -4,65 +4,60 @@ ```ts -import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js'; -import type { ButtonOptions } from '@microsoft/fast-foundation/button.js'; -import { DividerOrientation } from '@microsoft/fast-foundation/divider.js'; -import { DividerRole } from '@microsoft/fast-foundation/divider.js'; +import type { Constructable } from '@microsoft/fast-element'; +import { Direction } from '@microsoft/fast-web-utilities'; import { ElementStyles } from '@microsoft/fast-element'; import { ElementViewTemplate } from '@microsoft/fast-element'; -import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js'; -import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js'; -import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js'; -import { FASTButton } from '@microsoft/fast-foundation/button.js'; -import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js'; -import { FASTDivider } from '@microsoft/fast-foundation/divider.js'; import { FASTElement } from '@microsoft/fast-element'; import { FASTElementDefinition } from '@microsoft/fast-element'; -import { FASTMenu } from '@microsoft/fast-foundation/menu.js'; -import { FASTMenuItem } from '@microsoft/fast-foundation/menu-item.js'; -import { FASTProgress } from '@microsoft/fast-foundation/progress.js'; -import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js'; -import { FASTRadio } from '@microsoft/fast-foundation/radio.js'; -import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js'; -import { FASTSlider } from '@microsoft/fast-foundation/slider.js'; -import { FASTSwitch } from '@microsoft/fast-foundation/switch.js'; -import { FASTTab } from '@microsoft/fast-foundation/tab.js'; -import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js'; -import { FASTTabs } from '@microsoft/fast-foundation/tabs.js'; -import { FASTTextField } from '@microsoft/fast-foundation/text-field.js'; -import { MenuItemRole } from '@microsoft/fast-foundation/menu-item.js'; -import { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js'; -import { SliderOrientation } from '@microsoft/fast-foundation/slider.js'; -import { StartEnd } from '@microsoft/fast-foundation/patterns.js'; -import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js'; -import type { StaticallyComposableHTML } from '@microsoft/fast-foundation/utilities.js'; -import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js'; -import { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js'; +import { HTMLDirective } from '@microsoft/fast-element'; +import { Orientation } from '@microsoft/fast-web-utilities'; +import type { SyntheticViewTemplate } from '@microsoft/fast-element'; import type { Theme } from '@fluentui/tokens'; -import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js'; // @public -export class Accordion extends FASTAccordion { +export class Accordion extends FASTElement { + // (undocumented) + protected accordionItems: Element[]; + // Warning: (ae-forgotten-export) The symbol "AccordionExpandMode" needs to be exported by the entry point index.d.ts + expandmode: AccordionExpandMode; + // (undocumented) + expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void; + // @internal (undocumented) + handleChange(source: any, propertyName: string): void; + // @internal (undocumented) + slottedAccordionItems: HTMLElement[]; + // @internal (undocumented) + slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void; } -// @public +// @public (undocumented) export const accordionDefinition: FASTElementDefinition; -// Warning: (ae-internal-missing-underscore) The name "AccordionItem" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal // -// @internal (undocumented) -export class AccordionItem extends FASTAccordionItem { - // @public +// @public +export class AccordionItem extends FASTElement { block: boolean; - // @public + // @internal (undocumented) + clickHandler: (e: MouseEvent) => void; + disabled: boolean; + // @internal (undocumented) + expandbutton: HTMLElement; + expanded: boolean; expandIconPosition?: AccordionItemExpandIconPosition; - // @public + headinglevel: 1 | 2 | 3 | 4 | 5 | 6; + id: string; size?: AccordionItemSize; } -// Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal +// Warning: (ae-forgotten-export) The symbol "StartEnd" needs to be exported by the entry point index.d.ts // -// @public +// @internal +export interface AccordionItem extends StartEnd { +} + +// @public (undocumented) export const accordionItemDefinition: FASTElementDefinition; // @public @@ -71,9 +66,19 @@ export const AccordionItemExpandIconPosition: { readonly end: "end"; }; +// Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point index.d.ts +// // @public export type AccordionItemExpandIconPosition = ValuesOf; +// Warning: (ae-forgotten-export) The symbol "StartEndOptions" needs to be exported by the entry point index.d.ts +// +// @public +export type AccordionItemOptions = StartEndOptions & { + expandedIcon?: StaticallyComposableHTML; + collapsedIcon?: StaticallyComposableHTML; +}; + // @public export const AccordionItemSize: { readonly small: "small"; @@ -88,8 +93,6 @@ export type AccordionItemSize = ValuesOf; // @public (undocumented) export const accordionItemStyles: ElementStyles; -// Warning: (ae-incompatible-release-tags) The symbol "template" is marked as @public, but its signature references "AccordionItem" which is marked as @internal -// // @public export const accordionItemTemplate: ElementViewTemplate; @@ -99,11 +102,16 @@ export const accordionStyles: ElementStyles; // @public (undocumented) export const accordionTemplate: ElementViewTemplate; +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal +// // @public -export class AnchorButton extends FASTAnchor { +export class AnchorButton extends FASTElement { appearance?: AnchorButtonAppearance | undefined; // (undocumented) connectedCallback(): void; + control: HTMLAnchorElement; + // @internal + defaultSlottedContent: HTMLElement[]; disabled?: boolean; // (undocumented) protected disabledChanged(prev: boolean, next: boolean): void; @@ -112,9 +120,21 @@ export class AnchorButton extends FASTAnchor { protected disabledFocusableChanged(prev: boolean, next: boolean): void; // (undocumented) disconnectedCallback(): void; + download: string; + href: string; + hreflang: string; iconOnly: boolean; + ping: string; + referrerpolicy: string; + rel: string; shape?: AnchorButtonShape | undefined; size?: AnchorButtonSize; + target: AnchorTarget; + type: string; +} + +// @internal +export interface AnchorButton extends StartEnd, DelegatesARIALink { } // @public @@ -129,11 +149,9 @@ export const AnchorButtonAppearance: { // @public export type AnchorButtonAppearance = ValuesOf; -// @public +// @public (undocumented) export const AnchorButtonDefinition: FASTElementDefinition; -export { AnchorButtonOptions } - // @public export const AnchorButtonShape: { readonly circular: "circular"; @@ -157,6 +175,22 @@ export type AnchorButtonSize = ValuesOf; // @public export const AnchorButtonTemplate: ElementViewTemplate; +// @public +type AnchorOptions = StartEndOptions; +export { AnchorOptions as AnchorButtonOptions } +export { AnchorOptions } + +// @public +export const AnchorTarget: { + readonly _self: "_self"; + readonly _blank: "_blank"; + readonly _parent: "_parent"; + readonly _top: "_top"; +}; + +// @public +export type AnchorTarget = ValuesOf; + // @public export class Avatar extends FASTElement { active?: AvatarActive | undefined; @@ -349,7 +383,7 @@ export const BadgeColor: { // @public export type BadgeColor = ValuesOf; -// @public +// @public (undocumented) export const BadgeDefinition: FASTElementDefinition; // Warning: (ae-internal-missing-underscore) The name "BadgeOptions" should be prefixed with an underscore because the declaration is marked as @internal @@ -406,19 +440,53 @@ export const borderRadiusSmall = "--borderRadiusSmall"; // @public (undocumented) export const borderRadiusXLarge = "--borderRadiusXLarge"; +// Warning: (ae-forgotten-export) The symbol "FormAssociatedButton" needs to be exported by the entry point index.d.ts +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal +// // @public -export class Button extends FASTButton { +export class Button extends FormAssociatedButton { appearance?: ButtonAppearance | undefined; - // (undocumented) + autofocus: boolean; + // @internal (undocumented) connectedCallback(): void; + // (undocumented) + control: HTMLButtonElement; + defaultSlottedContent: HTMLElement[]; disabledFocusable?: boolean; // (undocumented) protected disabledFocusableChanged(prev: boolean, next: boolean): void; // (undocumented) disconnectedCallback(): void; + formaction: string; + // (undocumented) + protected formactionChanged(): void; + formenctype: string; + // (undocumented) + protected formenctypeChanged(): void; + formId: string; + formmethod: string; + // (undocumented) + protected formmethodChanged(): void; + formnovalidate: boolean; + // (undocumented) + protected formnovalidateChanged(): void; + formtarget: '_self' | '_blank' | '_parent' | '_top'; + // (undocumented) + protected formtargetChanged(): void; iconOnly: boolean; shape?: ButtonShape | undefined; size?: ButtonSize; + type: ButtonType; + // (undocumented) + protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void; + // Warning: (ae-unresolved-inheritdoc-reference) The @inheritDoc reference could not be resolved: The package "@fluentui/web-components" does not have an export "FormAssociated" + // + // (undocumented) + validate(): void; +} + +// @internal +export interface Button extends StartEnd, DelegatesARIAButton { } // @public @@ -433,9 +501,11 @@ export const ButtonAppearance: { // @public export type ButtonAppearance = ValuesOf; -// @public +// @public (undocumented) export const ButtonDefinition: FASTElementDefinition; +// @public +type ButtonOptions = StartEndOptions + ${startSlotTemplate(options)} + ${endSlotTemplate(options)} +