vNext: update components to extend FoundationElement (#4570)

* support foundation element on accordion and accordion item

* update anchor to use foundation element

* update AnchoredRegion to extend FoundationElement

* update Badge to extend FoundationElement

* update breadcrumb and breadcrumb item to extend FoundationElement

* update Button to extend FoundationElement

* update checkbox to extend from FoundationElement

* update Dialog to extend FoundationElement

* update disclosure to extend FoundationElement

* update divider to extend FoundationElement

* update Flipper to extend FoundationElement

* update horizontal scroll to extend FoundationElement

* update Listbox and ListboxOption to extend FoundationElement

* update combobox to extend FoundationElement

* update select to extend combobox and update tests

* fix listbox option styles and export

* update tests (wip)

* update Menu and MenuItem to extend FoundationElement

* update number field to extend FoundationElement

* update base name values

* fix: prevent the mixin helper from copying over constructor properties

* feat: fixture ergonomic improvements for foundation elements

* test: fix Anchor and associated unit tests based on new system

* remove incorrect tagFor usage

* update radio and radiogroup

* update skeleton

* update slider and slider label

* update switch

* update tabs et all to use FoundationElement

* update text area and text field to use foundation el

* Update tooltip to use FoundationElement

* update tests and tree item and view

* remove website from lerna packages in favor of npm registry to prevent breaking changes for the time being

* update progress and progress ring to use Foundation element

* fixing the tests

* feat: enable fixtures to handle N foundation elements and custom system

* fixing tests!

* Change files

* fix errors in fast-website

* update typings for explorer

* update naming convention to lowercase fast

* update imports for sites

* Change files

* update template names to lowercase

* update style casing and apply updates to component registries

* update tsdoc links for templates

Co-authored-by: Rob Eisenberg <[email protected]>

Author: chrisdholt

change/@microsoft-fast-components-a2550851-d95a-44e8-b894-b6522374a1f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "update components to extend FoundationElement",
+  "packageName": "@microsoft/fast-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-foundation-a1f17588-3819-4e5d-bd7b-0551b59828a9.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "update components to extend FoundationElement",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-tooling-react-f402f65f-d3f7-4bd8-be9b-6b6e55c2a7ec.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update fast-tooling references to web components",
+  "packageName": "@microsoft/fast-tooling-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/tooling/fast-tooling-react/src/form/custom-controls/control.css.utilities.tsx

@@ -1,11 +1,5 @@
 /** @jsx h */ /* Note: Set the JSX pragma to the wrapped version of createElement */
 import h from "../../utilities/web-components/pragma"; /* Note: Import wrapped createElement. */
-
-import React from "react";
-import {
-    RenderRefControlConfig,
-    RenderSelectControlConfig,
-} from "./control.css.utilities.props";
 import {
     FASTCheckbox,
     FASTNumberField,
@@ -14,6 +8,12 @@ import {
     FASTTextField,
 } from "@microsoft/fast-components";
 import { FASTColorPicker } from "@microsoft/fast-tooling/dist/esm/web-components";
+import React from "react";
+import {
+    RenderRefControlConfig,
+    RenderSelectControlConfig,
+} from "./control.css.utilities.props";
+
 /**
  * Ensure tree-shaking doesn't remove these components from the bundle.
  */

packages/web-components/fast-components/docs/api-report.md

@@ -16,7 +16,8 @@ import {
 } from "../styles/recipes";
 import { heightNumber } from "../styles/size";
 
-export const AccordionItemStyles = css`
+export const accordionItemStyles = (context, definition) =>
+    css`
     ${display("flex")} :host {
         box-sizing: border-box;
         font-family: var(--body-font);
@@ -130,19 +131,19 @@ export const AccordionItemStyles = css`
         z-index: 2;
     }
 `.withBehaviors(
-    accentFillRestBehavior,
-    neutralDividerRestBehavior,
-    neutralForegroundActiveBehavior,
-    neutralForegroundFocusBehavior,
-    neutralForegroundHoverBehavior,
-    neutralForegroundRestBehavior,
-    neutralFocusBehavior,
-    forcedColorsStylesheetBehavior(
-        css`
+        accentFillRestBehavior,
+        neutralDividerRestBehavior,
+        neutralForegroundActiveBehavior,
+        neutralForegroundFocusBehavior,
+        neutralForegroundHoverBehavior,
+        neutralForegroundRestBehavior,
+        neutralFocusBehavior,
+        forcedColorsStylesheetBehavior(
+            css`
             .button:${focusVisible}::before {
                 border-color: ${SystemColors.Highlight};
                 box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight};
             }
         `
-    )
-);
+        )
+    );

packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts

@@ -1,25 +1,23 @@
-import { customElement } from "@microsoft/fast-element";
 import {
     AccordionItem,
-    AccordionItemTemplate as template,
+    accordionItemTemplate as template,
 } from "@microsoft/fast-foundation";
-import { AccordionItemStyles as styles } from "./accordion-item.styles";
+import { accordionItemStyles as styles } from "./accordion-item.styles";
 
 /**
  * The FAST Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
- * {@link @microsoft/fast-foundation#AccordionItemTemplate}
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
  *
  *
  * @public
  * @remarks
  * HTML Element: \<fast-accordion-item\>
  */
-@customElement({
-    name: "fast-accordion-item",
+export const fastAccordionItem = AccordionItem.compose({
+    baseName: "accordion-item",
     template,
     styles,
-})
-export class FASTAccordionItem extends AccordionItem {}
+});
 
 /**
  * Styles for AccordionItem

packages/web-components/fast-components/src/accordion-item/index.ts

@@ -5,15 +5,16 @@ import {
     neutralForegroundRestBehavior,
 } from "../styles/recipes";
 
-export const AccordionStyles = css`
-    ${display("flex")} :host {
-        box-sizing: border-box;
-        flex-direction: column;
-        font-family: var(--body-font);
-        font-size: var(--type-ramp-minus-1-font-size);
-        line-height: var(--type-ramp-minus-1-line-height);
-        color: ${neutralForegroundRestBehavior.var};
-        border-top: calc(var(--outline-width) * 1px) solid
-            ${neutralDividerRestBehavior.var};
-    }
-`.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior);
+export const accordionStyles = (context, definition) =>
+    css`
+        ${display("flex")} :host {
+            box-sizing: border-box;
+            flex-direction: column;
+            font-family: var(--body-font);
+            font-size: var(--type-ramp-minus-1-font-size);
+            line-height: var(--type-ramp-minus-1-line-height);
+            color: ${neutralForegroundRestBehavior.var};
+            border-top: calc(var(--outline-width) * 1px) solid
+                ${neutralDividerRestBehavior.var};
+        }
+    `.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior);

packages/web-components/fast-components/src/accordion/accordion.styles.ts

@@ -1,24 +1,22 @@
-import { customElement } from "@microsoft/fast-element";
-import { Accordion, AccordionTemplate as template } from "@microsoft/fast-foundation";
-import { AccordionStyles as styles } from "./accordion.styles";
+import { Accordion, accordionTemplate as template } from "@microsoft/fast-foundation";
+import { accordionStyles as styles } from "./accordion.styles";
 
 export * from "../accordion-item/index";
 
 /**
  * The FAST Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
- * {@link @microsoft/fast-foundation#AccordionTemplate}
+ * {@link @microsoft/fast-foundation#accordionTemplate}
  *
  *
  * @public
  * @remarks
  * HTML Element: \<fast-accordion\>
  */
-@customElement({
-    name: "fast-accordion",
+export const fastAccordion = Accordion.compose({
+    baseName: "accordion",
     template,
     styles,
-})
-export class FASTAccordion extends Accordion {}
+});
 
 /**
  * Styles for Accordion

packages/web-components/fast-components/src/accordion/index.ts

@@ -9,12 +9,13 @@ import {
 } from "../styles/index";
 import { appearanceBehavior } from "../utilities/behaviors";
 
-export const AnchorStyles = css`
-    ${BaseButtonStyles}
-`.withBehaviors(
-    appearanceBehavior("accent", AccentButtonStyles),
-    appearanceBehavior("hypertext", HypertextStyles),
-    appearanceBehavior("lightweight", LightweightButtonStyles),
-    appearanceBehavior("outline", OutlineButtonStyles),
-    appearanceBehavior("stealth", StealthButtonStyles)
-);
+export const anchorStyles = (context, definition) =>
+    css`
+        ${BaseButtonStyles}
+    `.withBehaviors(
+        appearanceBehavior("accent", AccentButtonStyles),
+        appearanceBehavior("hypertext", HypertextStyles),
+        appearanceBehavior("lightweight", LightweightButtonStyles),
+        appearanceBehavior("outline", OutlineButtonStyles),
+        appearanceBehavior("stealth", StealthButtonStyles)
+    );

packages/web-components/fast-components/src/anchor/anchor.styles.ts

@@ -1,7 +1,10 @@
-import { attr, customElement } from "@microsoft/fast-element";
-import { Anchor, AnchorTemplate as template } from "@microsoft/fast-foundation";
+import { attr } from "@microsoft/fast-element";
+import {
+    Anchor as FoundationAnchor,
+    anchorTemplate as template,
+} from "@microsoft/fast-foundation";
 import { ButtonAppearance } from "../button";
-import { AnchorStyles as styles } from "./anchor.styles";
+import { anchorStyles as styles } from "./anchor.styles";
 
 /**
  * Types of anchor appearance.
@@ -10,25 +13,10 @@ import { AnchorStyles as styles } from "./anchor.styles";
 export type AnchorAppearance = ButtonAppearance | "hypertext";
 
 /**
- * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
- * {@link @microsoft/fast-foundation#AnchorTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fast-anchor\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ * The FAST components version of Anchor
+ * @internal
  */
-@customElement({
-    name: "fast-anchor",
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-})
-export class FASTAnchor extends Anchor {
+export class Anchor extends FoundationAnchor {
     /**
      * The appearance the anchor should have.
      *
@@ -79,3 +67,23 @@ export class FASTAnchor extends Anchor {
  * @public
  */
 export const AnchorStyles = styles;
+
+/**
+ * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
+ * {@link @microsoft/fast-foundation#anchorTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fast-anchor\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+export const fastAnchor = Anchor.compose({
+    baseName: "anchor",
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});

packages/web-components/fast-components/src/anchor/index.ts

@@ -1,8 +1,8 @@
 import { Direction, RtlScrollConverter } from "@microsoft/fast-web-utilities";
 import addons from "@storybook/addons";
 import { STORY_RENDERED } from "@storybook/core-events";
+import { AnchoredRegion as FoundationAnchoredRegion } from "@microsoft/fast-foundation";
 import AnchoredRegionTemplate from "./fixtures/base.html";
-import type { FASTAnchoredRegion } from "./index";
 import "./index";
 
 let scalingViewportPreviousXValue: number = 250;
@@ -67,14 +67,14 @@ addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
 
         const regionScalingUpdate = document.getElementById(
             "region-scaling-update"
-        ) as FASTAnchoredRegion;
+        ) as FoundationAnchoredRegion;
         document
             .getElementById("viewport-scaling-update")!
             .addEventListener("scroll", () => regionScalingUpdate.update());
 
         const regionScalingOffset = document.getElementById(
             "region-scaling-offset"
-        ) as FASTAnchoredRegion;
+        ) as FoundationAnchoredRegion;
         document
             .getElementById("viewport-scaling-offset")
             ?.addEventListener("scroll", (e: MouseEvent) => {

packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts

@@ -1,6 +1,6 @@
 import { css } from "@microsoft/fast-element";
 
-export const AnchoredRegionStyles = css`
+export const anchoredRegionStyles = (context, definition) => css`
     :host {
         contain: layout;
         display: block;

packages/web-components/fast-components/src/anchored-region/anchored-region.styles.ts

@@ -1,25 +1,23 @@
-import { customElement } from "@microsoft/fast-element";
 import {
     AnchoredRegion,
-    AnchoredRegionTemplate as template,
+    anchoredRegionTemplate as template,
 } from "@microsoft/fast-foundation";
-import { AnchoredRegionStyles as styles } from "./anchored-region.styles";
+import { anchoredRegionStyles as styles } from "./anchored-region.styles";
 
 /**
  * The FAST AnchoredRegion Element. Implements {@link @microsoft/fast-foundation#AnchoredRegion},
- * {@link @microsoft/fast-foundation#AnchoredRegionTemplate}
+ * {@link @microsoft/fast-foundation#anchoredRegionTemplate}
  *
  *
  * @beta
  * @remarks
  * HTML Element: \<fast-anchored-region\>
  */
-@customElement({
-    name: "fast-anchored-region",
+export const fastAnchoredRegion = AnchoredRegion.compose({
+    baseName: "anchored-region",
     template,
     styles,
-})
-export class FASTAnchoredRegion extends AnchoredRegion {}
+});
 
 /**
  * Styles for AnchoredRegion

packages/web-components/fast-components/src/anchored-region/index.ts

@@ -2,7 +2,8 @@ import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
 import { accentForegroundRestBehavior, heightNumber } from "../styles/index";
 
-export const BadgeStyles = css`
+export const badgeStyles = (context, definition) =>
+    css`
     ${display("inline-block")} :host {
         box-sizing: border-box;
         font-family: var(--body-font);

packages/web-components/fast-components/src/badge/badge.styles.ts

@@ -1,22 +1,20 @@
-import { customElement } from "@microsoft/fast-element";
-import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation";
-import { BadgeStyles as styles } from "./badge.styles";
+import { Badge, badgeTemplate as template } from "@microsoft/fast-foundation";
+import { badgeStyles as styles } from "./badge.styles";
 
 /**
  * The FAST Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
- * {@link @microsoft/fast-foundation#BadgeTemplate}
+ * {@link @microsoft/fast-foundation#badgeTemplate}
  *
  *
  * @public
  * @remarks
  * HTML Element: \<fast-badge\>
  */
-@customElement({
-    name: "fast-badge",
+export const fastBadge = Badge.compose({
+    baseName: "badge",
     template,
     styles,
-})
-export class FASTBadge extends Badge {}
+});
 
 /**
  * Styles for Badge