[web-components] update components to extend foundation element

change/@fluentui-web-components-72f613f8-2c88-4e90-873d-7abd1704bf86.json

@@ -0,0 +1,6 @@
+{
+  "type": "major",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -97,7 +97,7 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-element": "^1.0.0",
-    "@microsoft/fast-foundation": "^1.16.0",
+    "@microsoft/fast-foundation": "2.0.0-beta.0",
     "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"
   }

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

@@ -12,7 +12,8 @@ import {
 } from '../../styles/';
 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);
@@ -122,15 +123,15 @@ export const AccordionItemStyles = css`
         z-index: 2;
     }
 `.withBehaviors(
-  accentFillRestBehavior,
-  neutralDividerRestBehavior,
-  neutralForegroundActiveBehavior,
-  neutralForegroundFocusBehavior,
-  neutralForegroundRestBehavior,
-  neutralForegroundHoverBehavior,
-  neutralFocusBehavior,
-  forcedColorsStylesheetBehavior(
-    css`
+    accentFillRestBehavior,
+    neutralDividerRestBehavior,
+    neutralForegroundActiveBehavior,
+    neutralForegroundFocusBehavior,
+    neutralForegroundRestBehavior,
+    neutralForegroundHoverBehavior,
+    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};
@@ -139,5 +140,5 @@ export const AccordionItemStyles = css`
               fill: ${SystemColors.ButtonText};
             }
         `,
-  ),
-);
+    ),
+  );

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

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

packages/web-components/src/accordion/accordion.stories.ts

@@ -1,12 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/base.html';
-import { FluentAccordionItem } from './accordion-item';
-import { FluentAccordion } from '.';
-
-// Prevent tree-shaking
-FluentAccordion;
-FluentAccordionItem;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Accordion',

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

@@ -2,14 +2,15 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior } from '../styles/';
 
-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(accentFillRestBehavior, 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(accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior);

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

@@ -1,30 +1,25 @@
-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 FluentUI Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
- * {@link @microsoft/fast-foundation#AccordionTemplate}
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
+ * {@link @microsoft/fast-foundation#accordionTemplate}
  *
  *
  * @public
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-@customElement({
-  name: 'fluent-accordion',
+export const fluentAccordion = Accordion.compose({
+  baseName: 'accordion',
   template,
   styles,
-  shadowOptions: {
-    mode: 'closed',
-  },
-})
-export class FluentAccordion extends Accordion {}
+});
 
 /**
  * Styles for Accordion
  * @public
  */
-export const AccordionStyles = styles;
+export const accordionStyles = styles;

packages/web-components/src/anchor/anchor.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import AnchorTemplate from './fixtures/anchor.html';
-import { FluentAnchor } from './';
-
-// Prevent tree-shaking
-FluentAnchor;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Anchor',

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

@@ -9,12 +9,13 @@ import {
 } from '../styles/';
 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/src/anchor/index.ts

@@ -1,7 +1,7 @@
-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,26 +10,10 @@ import { AnchorStyles as styles } from './anchor.styles';
 export type AnchorAppearance = ButtonAppearance | 'hypertext';
 
 /**
- * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
- * {@link @microsoft/fast-foundation#AnchorTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-anchor\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ * The Fluent version of Anchor
+ * @internal
  */
-@customElement({
-  name: 'fluent-anchor',
-  template,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true,
-    mode: 'closed',
-  },
-})
-export class FluentAnchor extends Anchor {
+export class Anchor extends FoundationAnchor {
   /**
    * The appearance the anchor should have.
    *
@@ -77,4 +61,24 @@ export class FluentAnchor extends Anchor {
  * Styles for Anchor
  * @public
  */
-export const AnchorStyles = styles;
+export const anchorStyles = styles;
+
+/**
+ * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
+ * {@link @microsoft/fast-foundation#anchorTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-anchor\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+export const fluentAnchor = Anchor.compose({
+  baseName: 'anchor',
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+  },
+});

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

@@ -1,13 +1,9 @@
 import { STORY_RENDERED } from '@storybook/core-events';
 import addons from '@storybook/addons';
 import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities';
-import { FluentDesignSystemProvider } from '../design-system-provider';
-import { FluentAnchoredRegion } from '../anchored-region';
+import { AnchoredRegion } from '@microsoft/fast-foundation';
 import AnchoreRegionTemplate from './fixtures/base.html';
-
-// Prevent tree-shaking
-FluentAnchoredRegion;
-FluentDesignSystemProvider;
+import './index';
 
 let scalingViewportPreviousXValue: number = 250;
 let scalingViewportPreviousYValue: number = 250;
@@ -45,7 +41,7 @@ function scrollViewports(): void {
 function handleScrollViaUpdate(ev: Event): void {
   if (ev.target instanceof HTMLElement) {
     const scalingRegionUpdate: HTMLElement | null = document.getElementById('region-scaling-update');
-    if (scalingRegionUpdate instanceof FluentAnchoredRegion) {
+    if (scalingRegionUpdate instanceof AnchoredRegion) {
       (scalingRegionUpdate as any).update();
     }
   }
@@ -56,7 +52,7 @@ function handleScrollViaOffset(ev: Event): void {
     const scroller: HTMLElement = ev.target as HTMLElement;
 
     const scalingRegionOffset: HTMLElement | null = document.getElementById('region-scaling-offset');
-    if (scalingRegionOffset instanceof FluentAnchoredRegion) {
+    if (scalingRegionOffset instanceof AnchoredRegion) {
       (scalingRegionOffset as any).updateAnchorOffset(
         scalingViewportPreviousXValue - scroller.scrollLeft,
         scalingViewportPreviousYValue - scroller.scrollTop,

packages/web-components/src/anchored-region/anchored-region.styles.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/src/anchored-region/index.ts

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

packages/web-components/src/badge/badge.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import BadgeTemplate from './fixtures/badge.html';
-import { FluentBadge } from './';
-
-// Prevent tree-shaking
-FluentBadge;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Badge',